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.
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
RSS
I’ve done the same thing with PHP as the backend and no flash. Also, nice captcha
EllisGL – Yeah it’s possible with PHP but you can only do single file selection in the File upload dialog.
[...] Multiple file upload using jQuery and Flash | Weblenium (tags: jquery flash) Wikio Wikio [...]
Yeah, I have bumped into uploadify, very nice, but hard to add to a surrounding form.
phydeaux – I had no problems putting Uploadify into a form. It just replaces the input field element you specify with the Uploadify object.
[...] Multiple file upload using jQuery and Flash | Weblenium [...]
Hi,
Very nice!!
But how could I do to add more fields in my form?
I mean, if for example the form has:
1. Name (input file text)
2. Upload
3. Submit
I want to get the name and the files to show in another form?
Help please, thanks
Nice one
ocljlwijlmcds
Hi there! Wonderful idea, but can this actually perform?
CORNELIA
Hello, I came across this blog post while searching for help with JavaScript. I’ve recently changed browsers from Chrome to IE. After the change I seem to have a problem with loading JavaScript. Everytime I browse site that requires Javascript, my computer doesn’t load and I get a “runtime error javascript.JSException: Unknown name”. I can’t seem to find out how to fix it. Any help is greatly appreciated! Thanks
Hi, I discovered this site by mistake i was looking for Google for a registry cleaner that I had already purchased when I came upon your web-site, I must say your site is truly cool I just love the theme, its amazing!. I do not have the time right now to fully examine your internet site but I have bookmarked it as well as signed up to your RSS feeds. I will be back in a day or two. thanks to get a excellent site.”