Home About Contact

Multiple file upload using jQuery and Flash

Posted by phorner On May 1, 2009

I was recently searching for a solution that would allow people to upload photos of their homes on Golf Home Exchange. The standard upload method using HTML forms and PHP was not good enough as their was no indication of progress. As a result, the users thought the system wasn’t responding or something had gone wrong when simply it was taking a while to upload the image. Many simply gave up and never finished the registration process.

Luckily I stumbled across Uploadify, developed by Ronnie Garcia. Uploadify is a jQuery plugin that allows the easy integration of multiple (or single) file uploads. By default, the standard File Upload dialog in browsers only allows for single selection of files. To circumvent this issue and enable multiple file uploading, Flash is used.

To get started, you will need to download the jquery.uploadify-v1.6.2.zip package, then unzip and upload the files to your website.

Then in your HTML, add this code:

<body>
<input type="file" name="fileInput" id="fileInput" />
<script type="text/javascript">
$(document).ready(function() {
$('#fileInput').fileUpload ({
'uploader'  : 'uploader.swf',
'script'    : 'upload.php',
'cancelImg' : 'cancel.png',
'auto'      : true,
'folder'    : '/uploads'
});
});
</script>
</body>

This will set up Uploadify in it’s basic form. There are a ton of parameters you can set, plus event listeners (e.g. onAllComplete – triggers when all the files in the queue have been uploaded).

You can provide your own styled upload button and specifying the path to it by using the buttonImg parameter. If you want to customise the look of the upload progress bars, you will need to go into the Uploadify FLA and modify that manually.

Uploadify

You can also specify whether multiple files upload simultaneously or one at a time.

The script parameter allows you to specify your server side code that gets executed once a file has finished uploading. The example provided is PHP but you could use any backend development language.

There is only one downside to Uploadify, and that is that it needs Flash Player installed. If a user doesn’t have Flash Player installed, then it won’t work. I’m still looking for a File Upload solution for instances where the user doesn’t have Flash Player installed. Can anyone point me in the right direction?

Apart from this small issue, Uploadify is a solid alternative to using the standard File Upload dialog.

For more information and documentation: Uploadify

  • Share/Bookmark

159 Responses to “Multiple file upload using jQuery and Flash”

  1. Hope Engel says:

    We appreciate you the recommendation! Let me give it a try.

  2. Habbo Retros says:

    Nice Blog! Check Mine at Here

  3. Great article and point of view, but I wish it was a bit more technical in nature.

  4. Wow, very interesting article. It’s funny how history can be twisted in so many different ways. These photos certainly give us clues, but I guess we’ll never know the true story. . . .

  5. Hrmm that was weird, my comment got eaten. Anyway I wanted to say that it’s nice to know that someone else also mentioned this as I had trouble finding the same info elsewhere. This was the first place that told me the answer. Thanks.

  6. trance music says:

    Going to see Infected Mushroom Tonight. Its gonna be stunning. There playing with Roger Shah. Then next saturday ill be seeing ATB. a night to remember nights ahead

  7. This is such a great resource that you are providing and you give it away for free. I love seeing websites that understand the value of providing a quality resource for free. It?s the old what goes around comes around routine. Did you acquired lots of links and I see lots of trackbacks??

  8. Your feeds are fed into other blogger’s RSS feeders, making it syndicated or putting in another way, people out there will subscribe to them and receive online copies of your text.

  9. Yes you learn more while you share your knowledge with others. . . . . .

Leave a Reply