I'm looking for a cross-browser html file uploader with drag-and-drop capability. Ideally the drop target area can be large and overlap other elements (ie. I'd like to allow the user to drop the item on existing parts of the HTML UI instead of requiring a separate target area).
Cross browser support (including IE6) is important, as is reliability. I'm using jQuery, but am open to good solutions that don't use jQuery.
Any recommendations?
Drag and drop file uploads happen when you drag one or more files from an underlying platform's file manager and drop them onto a web page for upload. A preview of the image indicates the upload has begun. Many JavaScript libraries create this type of drag and drop file upload feature with a few lines of code.
HTML allows you to add the file upload functionality to your website by adding a file upload button to your webpage with the help of the <input> tag. The <input type=”file”> defines a file-select field and a “Browse“ button for file uploads.
Give FileDrop a try:
http://proger.i-forge.net/FileDrop_-_cross-browser_JavaScript_Drag-Drop_file_upload/7CC
As per the site:
supports Firefox 3.6, Internet Explorer 6, Google Chrome 7, Apple Safari 5 and Opera 11.61 (Opera 12+ supports native drag & drop).
Keep in mind drag-and-drop doesn't work in IE < 10 though.
Not sure if the drop area will work as you want, you will have to experiment.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With