Multiple File Upload With Progress Bar Using jQuery #serverdata #net


The default browser file input boxes do not allow multiple file selection for uploading at once and also do not provide any visual clue as to how much of the files selected have uploaded. Earlier I wrote about multiple file upload using AJAX. but that did not provide multiple file selection and a progress bar.

Today I am going to show you how to create a multiple file upload form that allows multiple file selection using Ctrl/Shift keys and also displays a progress bar for each of the selected files while they are uploading.

For this tutorial, you will need the all powerful jQuery library (latest version) and SWFUpload jQuery Plugin .

Folder Structure

Place the jQuery library in js folder, extract the SWFUpload jQuery Plugin somewhere and copy the jquery.swfupload.js in the src folder to the js folder. Also, copy the swfupload folder inside vendor folder of SWFUpload jQuery Plugin to js Folder. Here s what your folder structure should look like.

Add reference to jQuery library and then jquery.swfupload.js in the head tag of your page.

HTML Structure

Since we will be using SWFUpload, we ll need a container that will act as placeholder for SWFUpload button, and a list to show the queue of files.

CSS Styles

Here are some CSS styles to stylize our File Uploader, modify them as you want. Important ones are .progressbar and .progress that define the progress bar for file upload, you can adjust their height and color.

The JavaScript Code

The JavaScript code is a bit bulkier but it is not that difficult to understand as it looks.

Code Explanation
Since we are using SWFUpload jQuery Plugin, firstly we initialize it on the placeholder element using the $(‘#placeholder’).swfupload(< settings >) function and pass it a settings object that defines various parameters like server side file that will handle uploads, maximum size of the file, number of maximum uploads, allowed file types, button url, button size etc. For complete detail of settings you can use, refer to SWFUpload docs .

At this stage, your file upload script will work but will not show any visual clue to users about the upload. SWFUpload fires certain events that we can use to provide information to user about the file uploads. So, next thing is to bind functions to various events to show required output. That s what all bind calls are doing. They are pretty much self-explanatory.


Since this script uses SWFUpload to upload files, which requires flash plugin, so this will not work if flash plugin is not installed in end user s browser. Make sure to provide an alternative upload form so that users without flash can upload files.

Also, SWFUpload has some known issues when used on linux systems and if user is behind proxies. Make sure to read them before you use it in production environment.


Really great script, always had problems with multiple uploads, I built my own but using 5 input fields, this is much more elegant. I create session variables with my images created (timestamped so as not overwrite other images) and think this would be awesome to adapt my way of uploading images with this brilliant script.
David Bolton

Hi,i found several flash dependent fle uploaders. What is the main reason preventing to achieve the same functionality using pure Javascript code?.Thanks

This is great. I m trying to modify it so I can upload files directly to Amazon S3.

1) When I center the button/progress area, the progress bar starts in the middle and spans both sides until complete. This is awkward, can I would like it to proceed left to right. How do I do this?

2) How can I add a stop upload for uploads that are in progress?

Excellent tutorial to implement multiple image upload with progressbar. Thanks for sharing.

This is a great script, however I found that there s some problems in it. The upload procedure does not upload the files greater then x mb althoug I did the necesary modifications. It generates the ok messages, doesn t give any warnings or errors, but still the uploaded file isn t found in the upload folder.
Anyway, thanks for sharing.

sorin, in case of swfupload, it gives success message only on successful upload to the server and not on whether your server side script was able to move it to specified folder or not.
You ll have to set up uploadSuccess function binding in a way that it tests serverData variable and shows message accordingly.
Also, try enabling the debug mode of swfupload by setting debug:true in javascript code and see what the server side response is.

Jurgen Van de Water says:

Thanks for this tutorial! I m using this in my website but it won t work.

I tested it with the source files and it doesn t work. When I do an upload it says that it is uploading but it keeps saying uploading and my upload bar goes directly to 100%. When I see in the map uploads there is nothing in it. Can somebody please help me with this problem?

Found a solution for detecting all uploads complete (I m totally new to JS so apologies in advance!)

1) Within the (fileDialogueComplete) event set a global variable totalFiles with the value of numFilesQueued
2) Within the (uploadSuccess) event split with _ and compare the last element in the array plus 1 with totalFiles .

If they are equal, all uploads are complete.

I would have liked to handle this all in the fileDialogueComplete event, but this event doesn t get file passed to it. (Interested to learn how this could receive file ).

Interested in feedback if there is a better way to achieve this.

Michael Douglas says:

This script is just what I need. I have successfully managed to increase the # of uploads from 5 to suit my needs. This is working fine.

I m having issues with increasing the file size allowed. I have changed the java/php script together. I does allow the file to be uploaded on my site, but the file never moves into the uploads folder. Can someone please point me in the correct direction.

Michael Douglas says:

Please disregard my last post. It was my mistake, some of my changes did not take.

I have now sucessfully allowed up to 60 uploads, with max file size of 5MB.

Now, because of this script, my website is done!!

Is there any way to pass information to the PHP script processing the uploads? Specifically, I need to pass POST or GET variables so that the php script can update a database with the user s name/id and also an ID for the page they re uploading from.

I m able to get files into my filesystem and even rename them, but this lack of other information is causing issues. I m a bit of a newbie to javascript, so I m using the demo more or less as written.

Actually, I think I ve figured it out. I m using php, so I take information from the page that calls the script and insert a GET query line in the upload_url variable so it reads something like:

Hey exellent upload script! I ve just about had enough of trying to force others to work but this works straight outta the box. Awesome!

One thing I d like to integrate though is email support. I want to get an email when users add a file to the server as well as add their name and email which would come with the email.

Any ideas how I d do this (Im ok with php but not excellent)

I would like to change the file name to represent MMYYDD, once it has been uploaded and moved the the upload folder. That way if someone uploads the same file name, it wont overwrite the first file. Can someone please help me accomplish this or point me in the correct direction.
I know its an addition to the php script, just dont know what to add and also where to add it.
I appreciate help on this, thanks

I am using this plugin in my own framework and had to pass the PHPSID through the query string to gain access to the session. I suppose this is a cookie issue with flash. Or is the cookie plugin for swf required ?

Very nice!
However, javascript and flash are too HUGE dependencies
provide an alternative upload
hell, might as well not use it if you have to double the amount of work it takes. Unusable candy.

Great script. Everything seems to be working well, except: The browser doesn t see the uploaded files. The files are there on the server in the uploads directory (and I m able to download them using ftp), but when I click on view on the progress bar, or type in the url of the file directly into the browser, I get a 404 error. How weird is that?

Leave a Comment

Your email address will not be published. Required fields are marked *