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
any news coming ?
Hello from Russia!
Can I quote a post in your blog with the link to you?
well.. it’s like I said!
yoo. strange thread
it is causing error in IE , while uploading files session values are vanished
Hi – very good web site you have created. I enjoyed reading this posting. I did want to issue a remark to tell you that the design of this site is very aesthetically pleasing. I used to be a graphic designer, now I am a copy editor for a merchandising firm. I have always enjoyed playing with information processing systems and am trying to learn computer code in my free time (which there is never enough of lol).
interesting…
interesting.