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

519 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. . . . . .

  10. Ich verstehe den Inhalt nicht ganz, aber sonst Ok.

  11. Sweet, that’s exactly what I was looking for! You just saved me alot of work :)

  12. Waterford says:

    Cheers for the upload

  13. Diety says:

    Should I buy steel golf clubs or graphite ?

  14. Ateny says:

    You certainly have some agreeable opinions and views. Your blog provides a fresh look at the subject.

  15. Bookmarked your site. Appreciation for sharing. Surely valued at enough time from my tests.

  16. I thought it was going to be some boring old post, but it really compensated for my time. I will post a link to this page on my blog. I am sure my visitors will find that very useful. . . .

  17. Great post, thanks. Like your blog design too.

  18. 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.

  19. funny movie says:

    Terrific blog site and thanks for producing this send. I’m a day by day reader and I imagined you should really know that you’re a really fantastic writer. :)

  20. Guys, Great article and very very interesting blog. That’s one thing I’m really looking forward. Looking forward to reading more from you next week.

  21. Good read. Do you have a RSS feed?

  22. bigmouthfuls says:

    Awesome Post. I add this Blog to my bookmarks.

  23. Facial Fest says:

    You certainly have some agreeable opinions and views. Your blog provides a fresh look at the subject.

  24. Don’t take to heart every thing you hear.
    Don’t spend all that you have.
    Don’t sleep as long as you want;

  25. Have found your web page. My pal mentioned it to me before, yet never got around to checking it out until now. I must express, I’m floored. I really enjoyed reading through your posts and will absolutely be back to get more.

  26. free movies says:

    It’s amazing to wake up and have an amazing internet site as my dwelling page.

  27. Educational and entertaining. I’ve additional your internet log to my “reading substance. ” Progress me updated!. . . .

  28. I am not really sure if best practices have emerged around things like that, but I am sure that your great job is clearly identified. I was wondering if you offer any subscription to your RSS feeds as I would be very interested.

  29. buy links says:

    I’m impressed!! Really informative blog post here my friend. I just wanted to comment & say keep up the quality work. I’ve bookmarked your blog just now and I’ll be back to read more in the future my friend! Also nice colors on the layout, it’s really easy on the eyes.

  30. wow, nice post, I was wondering how to cure acne naturally. and found your site by yahoo, many userful stuff here, now i have got some idea. I’ve bookmark your site and also add rss. keep us updated.

  31. I have been visiting variousblogs for my dissertation study. I have found your blog to be fairlybeneficial. Keep updating your blog with usefulinformation… Regards

  32. Great post, thanks. Like your blog design too.

  33. Kredyt says:

    Great Blog. I add this Post to my bookmarks.

  34. Sok Noni says:

    I just sent this post to a bunch of my friends as I agree with most of what you’re saying here and the way you’ve presented it is awesome.

  35. 5 iai says:

    This is some intersting information. Thanks for taking the time to post.

  36. Adding to my bookmarks thanks. Where is your contact details though?

  37. Wonderful articles & Very good a internet site.

  38. Hiya guys, I’ve a great way to make shed loads of money online making blogs. I expect this is primaraly for the website bloggers but there are probably alot more bloggers reading this. I have made thousands using the techniques explained in the product and it’s only been 2 months. Free Money Making Blog By Blogging To The Bank

  39. Why did you remove my post… My post was actually useful unlike most of these comments. Ill post it again. Heya guys, I have found a great way to make lots and lots of money online making blogs. I expect this is probably for the website bloggers but there are probably alot more bloggers reading this. I have already made thousands using the techniques described in the product and its only been 2 months. Free Money Making Blog By Blogging To The Bank

  40. Thanks for the read, I will bookmark it and come back later to check out some of your other posts =)

  41. sc2 says:

    If you guys are interested in Starcraft 2, you should check out this SC2 website.

  42. Tomas Rineer says:

    Hi guys. I want to share a new Clickbank product with you. It’s called Mobile Monopoly. It’s been on the market for just over a month and is already the most selled product on Clickbank. It exposes brand new techniques on how to earn money with Mobile Marketing. Mobile Market is BOOMING right now for making money, it is booming and i assure you with this Ebook you really can make thousands per month. Mobile Marketing is booming right now, just like the .com did in the late 90’s. Get your share of the money. Mobile Monopoly – Just check the site out. I promise you that you wont regreat it. This Ebook is for everyone who is intrested in making money online.

  43. Great blog! I genuinely love how it’s uncomplicated on my eyes and also the details is well written. I am wondering how I might be notified whenever a new post has been made. I have subscribed to your rss feed which should do the trick! Have a nice day!

  44. I am not really sure if best practices have emerged around things like that, but I am sure that your great job is clearly identified. I was wondering if you offer any subscription to your RSS feeds as I would be very interested.

  45. sc2 says:

    If you guys are interested in SC 2, you should check out this starcraft 2 website.

  46. I wanted to thank you for this great read!! I definitely enjoying every little bit of it.I have you bookmarked to check out new stuff you post.

  47. Good topic for making an effective dissertation. . . . . .

  48. Amazing, truly excellent information. Your blog is really awesome. I bookmarked this and will come back once again. . . .

  49. I agree with you. This type of projects should be encouraged and I think that these type of projects are the projects for the future. . . . .

Leave a Reply