Multiple File Upload With Progress Bar Using jQuery

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. 


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.

view plaincopy to clipboardprint?

1. <div id="swfupload-control">  
2.     <p>Upload upto 5 image files(jpg, png, gif), each having maximum size of 1MB(Use Ctrl/Shift to select multiple files)</p>  
3.     <input type="button" id="button" />  
4.     <p id="queuestatus" ></p>  
5.     <ol id="log"></ol>  
6. </div>  

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.

view plaincopy to clipboardprint?

1. #swfupload-control p{ margin:10px 5px; font-size:0.9em; }  
2. #log{ margin:0; padding:0; width:500px;}  
3. #log li{ list-style-position:inside; margin:2px; border:1px solid #ccc; padding:10px; font-size:12px;  
4.     font-family:Arial, Helvetica, sans-serif; color:#333; background:#fff; position:relative;}  
5. #log li .progressbar{ border:1px solid #333; height:5px; background:#fff; }  
6. #log li .progress{ background:#999; width:0%; height:5px; }  
7. #log li p{ margin:0; line-height:18px; }  
8. #log li.success{ border:1px solid #339933; background:#ccf9b9; }  
9. #log li span.cancel{ position:absolute; top:5px; rightright:5px; width:20px; height:20px;  
10.     background:url('js/swfupload/cancel.png') no-repeat; cursor:pointer; }  

The JavaScript Code

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

view plaincopy to clipboardprint?

1. $(function(){  
2.     $('#swfupload-control').swfupload({  
3.         upload_url: "upload-file.php",  
4.         file_post_name: 'uploadfile',  
5.         file_size_limit : "1024",  
6.         file_types : "*.jpg;*.png;*.gif",  
7.         file_types_description : "Image files",  
8.         file_upload_limit : 5,  
9.         flash_url : "js/swfupload/swfupload.swf",  
10.         button_image_url : 'js/swfupload/wdp_buttons_upload_114x29.png',  
11.         button_width : 114,  
12.         button_height : 29,  
13.         button_placeholder : $('#button')[0],  
14.         debug: false  
15.     })  
16.         .bind('fileQueued', function(event, file){  
17.             var listitem='<li id="'+file.id+'" >'+  
18.                 'File: <em>'+file.name+'</em> ('+Math.round(file.size/1024)+' KB) <span class="progressvalue" ></span>'+  
19.                 '<div class="progressbar" ><div class="progress" ></div></div>'+  
20.                 '<p class="status" >Pending</p>'+  
21.                 '<span class="cancel" >&nbsp;</span>'+  
22.                 '</li>';  
23.             $('#log').append(listitem);  
24.             $('li#'+file.id+' .cancel').bind('click', function(){ //Remove from queue on cancel click  
25.                 var swfu = $.swfupload.getInstance('#swfupload-control');  
26.                 swfu.cancelUpload(file.id);  
27.                 $('li#'+file.id).slideUp('fast');  
28.             });  
29.             // start the upload since it's queued  
30.             $(this).swfupload('startUpload'); 
31.         }) 
32.         .bind('fileQueueError', function(event, file, errorCode, message){ 
33.             alert('Size of the file '+file.name+' is greater than limit'); 
34.         }) 
35.         .bind('fileDialogComplete', function(event, numFilesSelected, numFilesQueued){ 
36.             $('#queuestatus').text('Files Selected: '+numFilesSelected+' / Queued Files: '+numFilesQueued); 
37.         }) 
38.         .bind('uploadStart', function(event, file){ 
39.             $('#log li#'+file.id).find('p.status').text('Uploading...'); 
40.             $('#log li#'+file.id).find('span.progressvalue').text('0%'); 
41.             $('#log li#'+file.id).find('span.cancel').hide(); 
42.         }) 
43.         .bind('uploadProgress', function(event, file, bytesLoaded){ 
44.             //Show Progress 
45.             var percentage=Math.round((bytesLoaded/file.size)*100); 
46.             $('#log li#'+file.id).find('div.progress').css('width', percentage+'%'); 
47.             $('#log li#'+file.id).find('span.progressvalue').text(percentage+'%'); 
48.         }) 
49.         .bind('uploadSuccess', function(event, file, serverData){ 
50.             var item=$('#log li#'+file.id); 
51.             item.find('div.progress').css('width', '100%'); 
52.             item.find('span.progressvalue').text('100%'); 
53.             var pathtofile='<a href="uploads/'+file.name+'" target="_blank" >view &raquo;</a>'; 
54.             item.addClass('success').find('p.status').html('Done!!! | '+pathtofile); 
55.         }) 
56.         .bind('uploadComplete', function(event, file){ 
57.             // upload has completed, try the next one in the queue 
58.             $(this).swfupload('startUpload');  
59.         })  
60. });  

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.

Limitations

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.

Download Source Code

Reference:

http://webdeveloperplus.com/jquery/multiple-file-upload-with-progress-bar-using-jquery/