Multiple File Drag and Drop Upload using HTML5 and Jquery.

Are you looking for Drag and Drop multiple file upload using HTML5. Just take a look at this post, I had implemented this system with using jquery and PHP that uploads multiple files into server. This script helps you to enrich your web applications upload system. It works with all modern browsers try live demo and drop files.

Multiple File Drag and Drop Upload this will work in modern browsers like Crome, Firefox and Safari, File uploads happening through ajax
for this I implemented with Form Data and File Reader javascript API.

Requirements
- Jquery (tested with 1.7+)
- HTML 5

How to use
Just include Jquery library and multiupload.js files available in download script.

Javascript Code
All config parameters are required. If you want to allow other files formats, add in valid files variable.

I have found another (much worse and old-school) method quite a few years ago, when JQuery wasn't as popular... In a closed environment you can setup a SFTP server and embed an iframe in the admin area of the site with credentials already embeded, then leave the FTP handling to the browser, that way you can drop any files in the iframe and the browser will upload them into a preconfigured folder.

That is fine and works good...but Arun I am looking to upload from both local drive and from another website, which means I can drag image from another tab of same browser or another browser and drop in there to upload SAME AS imgur(.)com...try this site to upload from both local drive and another website. Is it possible? do you know how to do so? Please reply me if you have any idea.

Great script - one thing I've found is that if a user hits 'upload' again, it uploads any files that were dropped in, even though their progress bars and such are gone. Is there a way to clear out the queue once it's done, or preferably have each item remove itself from the queue once its upload/success has been triggered?

Yes it did work... and looks pretty good but i seem to have problems uploading audio and video files...even after adding the MIME types to the support variable...!! this the support variable i have with me...!

I try to add a choosing folder with a "select" to your script but I don't know how to receive it with a $_POST variable in the file upload.phpand uplaod the pictures in the folder choose by the user like :

further to my last comment it looks as though lines 42-45 might be responcible for not allowing other formats. Need Arun's confirmation, but perhaps if this validation is expanded, or removed, all file types might be allowed.

Ultimately the code is simply identifying local files and providing an upload functionality, so any format is possible it will just boil down to the client side validations within the script. Not sure how many are needed for the core function to run.

Hello Arun,The plugin is really cool and it works. There seems to be some issue with the upload code. Once the uploading is done successfully the selected files list are still shown beside the browse button. Also when we click upload once again the previous selected files are uploaded again and again.Also 'progressBar' and 'status' div classes are been used for any purpose?

This plugin is really great but I want some changes under this plugin like upload only single uploading and also upload only csv and xls file. I tried to upload csv and xls but it doesn't work. Some help me to resolve this problem. I really need it.

This script is really cool. Thank you for sharing.I would like to make the "choose Files" and "Upload" buttons inactive or hidden while the upload is in progress (as soon as the "upload" button has been pressed). I would also like to add another div at the bottom to display a link to the next step.How can I turn these div visible/invisible based on the end result of the upload?

Drag and drop functionality not working in firefox . im using latest firefox version 42.0.Drag and drop functionality work in vhrome properly but not in firefox.please let me know if anyone know this answer.last one week i search the code but nothing is happen.

Great script! I am working on a way to modify this so that multiple files can be uploaded to more than one location. In other words, multiple "Drag & Drop" boxes that each have a target upload to separate locations. My question is how can I send the target upload location to the script? I attempted to send it from the "uploadUrl: by sending the URL over http such as "upload.php?target=somenewdir" , then having the upload.php file read in that var, but it will not read in - Any ideas on how to do this?

This plugin is really great but I want some changes under this plugin like upload only single uploading and also upload only csv and xls file. I tried to upload csv and xls but it doesn't work. Some help me to resolve this problem. I really need it.

How do I pass a variable from the upload form to upload.php so I can store it in the DB?For instance in the form: < i n p u t type="hidden" id="parent" "value="5">Then on upload.php $parent = $_POST['parent'];

Okay now I have the $parent variable passing through to my database. But now the progress bar is stuck on and never goes away. If I put the exit command in front of my php code the bar goes away. If I put it at the end, it doesn't.

if i upload more than one image means, example - 3 image means ajax calls upload.php file for 3 times. Means for every image ajax calls the upload file. Is possible to upload all the image files in single ajax call. Thanks in advance.