javascript - How to create a drop zone for images to be dragged into? - Stack Overflow

admin管理员组

文章数量:1332361

Is it possible for javascript or html to create a drop zone for images to be dragged into by a user? I suppose it is an image placeholder that will accept images dragged into it while the page is live?

Is it possible for javascript or html to create a drop zone for images to be dragged into by a user? I suppose it is an image placeholder that will accept images dragged into it while the page is live?

• javascript

Share Improve this question Follow edited Jul 5, 2011 at 17:17 razlebe 7,14466 gold badges4444 silver badges5757 bronze badges asked Oct 29, 2010 at 4:32 ZainZain 5,5811111 gold badges3636 silver badges3535 bronze badges 0

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

Images from where? If you want to be able to drag images from the webpage itself, that is possible, but if you want images from outside to be dropped, that is simply not possible using JavaScript. difficult at the moment.

Edit: As @John Boker mentioned, it is possible, but at the moment, the APIs are highly non-standard and vary wildly between browsers. HTML 5 will support a standard and simpler API for this but HTML 5 itself is not a standard yet.

Some resources:

• HTML5 Drag and Drop File API - currently works only in Firefox, will hopefully bee standard soon
• VBDataObject Interface - works only in IE

Recently http://www.dropzonejs./ has bee quite popular.

Short Answer: Yes you can, but your browser needs to support for the Drag and Drop and File APIs that are part of HTML5. Currently, that is only Chrome 8+ and Firefox 3.6+.

July, 2011 Update: Current browsers that support this are Chrome, Firefox, Safari 6 (and Safari 5 if you use FormData objects) and IE 10 Preview 2. More information here.

IE 8 and 9 don't work, not sure if IE9 final will change this.

Safari 5 (as much as Apple touts HTML5) has no support for the File API necessary and DnD of native resources is not recognized (DnD within the page can be made to work, but that is only half the problem). You can hack around this lack in Safari 5 by using a trick of styling out an INPUT field of type "FILE" to actually not show the file path bar and utilize the fact that that Drag and Drop onto a file upload box in Safari actually inserts the full file name -- you use some JavaScript to trigger the upload as soon as they drop and viola. Here is a tutorial specifically for that hack.

Opera doesn't seem to support either API -- I've read that they are waiting out the battle of the HTML5 spec until the dust settles THEN adding support for those APIs necessary to do this.

I am actually the author of the HTML5 Drag and Drop/File API Upload tutorial linked above and used that method to implement exactly what you want at imgscalr. -- the JavaScript is heavily mented if you want to pull it down and look at how I'm doing it.

Hope that helps.

本文标签： javascriptHow to create a drop zone for images to be dragged intoStack Overflow