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