If you're using a browser (currently Firefox 3.6 or better) that understands what to do about the FileReader function, you should be able to drag files to the drop zone, below, and immediately see them converted to data:uri format.

Drag Files Here to Create Data URIs

Things to Do and Notice

• Drag an image onto the drop zone and you should see it immediately processed, thumbnailed, and displayed. (The thumbnail is the full-sized image scaled to 60 by 60px; sorry, but I'm just not that cool.)
• Everything's happening on the client; my end never sees your file.
• Multiple files work fine, and there are no size limits; it's all happening on your end.
• Non-image files also work, although you won't see a thumbnail.
• Directory drops will get you nothing but a blank box.

Caution

Something I'm loading asynchronously--I'm guessing it's Facebook-related, and has piggybacked on Disqus--seems to occasionally block the script. If it doesn't work, please try reloading the page and waiting for all the asynchronous calls to settle down. Sorry about that!

Source?

It's on GitHub, here:

https://github.com/kentbrew/dragToDataUri

Loving GitHub for Mac!

I'm using the extremely spiffy new GitHub for Mac to keep track of this project. Fast, free, gorgeous, and highly recommended!

As always, please have fun, and do let me know how it goes.