Multiple Upload Using Single Upload File With jQuery

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: