Get url instead of file on HTML5 drag&drop image

Question

http://www.html5rocks.com/en/tutorials/dnd/basics/

Following this example, I need to retrieve the URL of an image instead of he image content itself, even if it's coming from the Desktop (because the webapp I'm writing is not necessarily meant to work online).

Answer 1

AFAIK, the filepath of the image won't be available as it would be a security issue. It used to be possible on older versions of Firefox, but that's not going to help if you're looking for HTML5 DND support.

It might be worthwhile to look into the Filesystem API to support offline use. (By which I mean, after an image is dropped, take the raw image data and use FileWriter to store it in the filesystem sandbox.)

Answer 2

您可以使用数据URL，例如http://www.html5rocks.com/en/tutorials/file/dndfiles/#toc-selecting-files-dnd