jQuery File Upload Plugin With Drag ‘n’ Drop Support


jQuery File Upload is a plugin for the popular JavaScript framework that helps handling file uploads.

The plugin is based on open standards like HTML5-JavaScript and doesn't use Flash. For legacy browsers it falls back to an Ajaxed-like iframe-PHP solution.

jQuery Drag Drop File Upload

Multiple files can be selected, they can even be drag 'n' dropped from the desktop and the upload process can start automatically or with an event (like clicking the "upload" button).

A progress bar can display the status and uploads can be canceled anytime.

It is possible to use multiple instances of the plugin in the same page and jQuery File Upload is compatible with any server-side application platform.

  1. Reply Rudy March 17, 2011 at 6:03 AM

    This is AWESOME!!!!!! Best upload script ever seen!!!

  2. Reply Stephen Coley March 17, 2011 at 9:22 AM

    Could this be integrated with Amazon S3? Does it upload each file with one submission, or does it do each asynchronously? Looks like it might do each asynchronously seeings as how you can cancel specific uploads.

  3. Reply Si March 19, 2011 at 2:09 PM

    I would also like to know if it supports Amazon S3

  4. Reply WordPress Developer April 8, 2011 at 8:49 AM

    Very nice! I’ve been wanting to develop a multiple file uploader like this for a while now but it was a daunting task. Thank you thank you.

    Easy Amazon S3 integration would be awesome, but there’s probably a PHP script for this out there somewhere…

  5. Reply Josh August 18, 2011 at 12:05 AM

    Am I missing something. How do you get this script to work? It’s like the download files are missing something.

  6. Reply Aneeq May 21, 2012 at 6:15 AM

    The code to upload file in PHP is very simple, but we need to understand the flow which is a below.

    1. Browse the file from a local system
    2. Upload to server
    3. Server keeps it on a temporary path
    5. Copy from temporary to permanent path

    Create a file upload form



    * An enctype attribute of the tag has been specified.
    * This attribute specifies which content-type to use when submitting the form
    * We have used “multipart/form-data” to upload binary data, like the contents of a file, to be uploaded
    * If proper enctype is not provided, upload will not work.
    * File upload is a huge security risk so you must check what type of files are being uploade

    Create a file upload script (upload-file.php)

    This will upload the file to the specified path.


    * The default file upload size using a browser is usually 2MB so files larger than this size may not upload. You will have to alter the file upload setting on the server.
    * You need to set write permission to the folder where file needs to be upload.
    * In our case, the “uploads” folder needs to have a 777 permission on a linux/unix server.





  7. Reply Evan July 20, 2012 at 3:55 PM

    Just wondering CAN this work with something really old like IE7? or 8? If it’s HTML 5 based I hope I’m not SOL

Leave a reply