This is a trick to perform multiple upload using a single upload bar instead of multiple upload bars created by stickman. If you are looking for multiple upload using iframe or asynchronous method, you can visit this simplest way tutorial that explains how iframe method can be done and whether ajax method is available. I first came across stickman article was when i was doing research for multiple upload without having the file uploaded into the server. His idea was brilliant. However, i hardly have the need for such function until recently when my project submit form required multiple upload using a single upload bar again. Stickman method was pure JavaScript which is great and efficient but i needed something from jQuery. Here, i will try to simplify his method into jQuery form.
Concept of Single Multiple Upload File
In order to achieve single multiple upload file, we will have to understand that multiple upload is still possible even without asynchronous upload, that is, we will need multiple upload bar displaying on the screen and having user to click on each upload bar to upload multiple item at once. In stickman concept, its almost the same. The only differences is that he uses one upload bar and insert a new one on top of the existing upload bar AFTER a user has finished selected the item to be uploaded. Therefore it seems like there is only one upload bar. (the process is too fast for our eyes to follow. Thus, we all get trick when this happen) But in reality, all these upload bars were only hidden from user but not from codes. Once, the submit button is pressed, all the visible and non-visible upload bars are being uploaded to the server! This way we get our cheap multiple upload using a single upload bar method.
jQuery Single Multiple Upload File
I won't be displaying stickman code in this article as you can download directly from his website. We can now proceed with the coding after we have understand how stickman method works.
HTML code
All we need on the HTML section are these:
<div> <input type="file" name="files[]"> <div id="upload_list"></div> </div>
jQuery code
jQuery code is fairly simple. Let's don't complicate stuff. All we need to do is this.
jQuery(document).ready(function($){
var replaceMe = function(){
var obj = $(this);
$(obj).css({'position':'absolute','left':'-9999px','display':'none'}).parent().prepend('<input type="file" name="'+obj.attr('name')+'"/>')
$('#upload_list').append('<div>'+obj.val()+'<input type="button" value="cancel"/><div>');
$("input[type='file']").change(replaceMe);
$("input[type='button']").click(function(){
$(this).parent().remove();
$(obj).remove();
});
}
$("input[type='file']").change(replaceMe);
});
The above takes care of the basic. If you wish to restrict the number of upload, you can place a restriction variable.
jQuery(document).ready(function($){
var max = 2;
var replaceMe = function(){
var obj = $(this);
if($("input[type='file']").length > max)
{
alert('fail');
obj.val("");
return false;
}
$(obj).css({'position':'absolute','left':'-9999px','display':'none'}).parent().prepend('<input type="file" name="'+obj.attr('name')+'"/>')
$('#upload_list').append('<div>'+obj.val()+'<input type="button" value="cancel"/><div>');
$("input[type='file']").change(replaceMe);
$("input[type='button']").click(function(){
$(this).parent().remove();
$(obj).remove();
return false; //safari fixes
});
}
$("input[type='file']").change(replaceMe);
});
Where max is the counter that restricts the number of uploads. Since jQuery takes care of most of the complicated things. The code eventually became smaller. For some reason bind doesn't works for the event change. Thus, i will have to attach the event again. From pure JavaScript of 156 line into a few line of codes, jQuery definitely makes developers life much more easier (doesn't means the code produce by jQuery is much more efficient though.).
The Demo
The demo can be found here.
Conclusion
The above jQuery code has simplify the version found on stickman site. Although the display doesn't looks as attractive but my objective has been achieved. Sometimes, JavaScript can be harder to read compared to a jQuery one. However, JavaScript version still has a better efficiency as compared to a jQuery one.