Uploadify: The jQuery Plugin for Customizing File Upload Fields [con't]
Test and Analyze Your Uploadify Code
Try uploading a moderately large file so that you can see the progress bar grow as the file is being uploaded. Neat, isn't it?
Now let us analyze the code. The includes don't need explanation. The HTML markup is very simple too. The only attribute that I will discuss is the ID. That's the hook that the Uploadify plugin uses.
file_upload and magically converts it to a beautiful-looking uploader with a few options that you can define.
uploader(string): The path to the uploadify.swf file
script(string): The path to the backend script that will process the file uploads
cancelImg(string): The path to an image you would like to use as the cancel button
folder(string): The path to the folder where you want to save the files
auto(boolean): For automatically uploading files as they are added to the queue
fileExt(string): A list of file extensions that are allowed for upload
buttonText(string): The text that appears on the default button
buttonImg(string): The path to an image you would like to use as the browse button. Here are a couple of screenshots of the Uploadify plugin in use:
Single File Upload
Multiple File Upload
This Flash-based file uploader is rather lightweight and easy to implement. It allows you to customize the look of the button, decide which file types the user can upload, and displays a progress bar. The only feature missing is the ability to specify a list of file types that the user should not be able to upload. I can think of a few uses for that. That said, wouldn't it be wonderful if the HTML file uploader input field could support all this by default? We wouldn't need to use Flash for it then. Until that happens, we at least have Uploadify.