How to Upload Multiple Files in a Web Application with Progress Bar, Multiple Fields and Form Validation Using jQuery, PHP & Uploadify
There are a few tutorials out there on how to use Uploadify to upload files in a web application. However, I haven't found one that integrates Uploadify into a form with other fields, so that the form validates and submits correctly whether images are uploaded or not.
My goal was to write a script that accomplishes the following objectives:
- Upload files with a progress bar
- Associate the uploaded files with the other fields within the form (a blog entry in this case)
- Submit the form and upload the files only if all required fields have been filled out
- Submit the form even if no file has been selected to upload
- Do all the above even when a user hits the 'Enter' key instead of just clicking the submit button
» View Demo
» Download the Files
One downside to the script is that it requires Flash for the upload progress bar, but this shouldn't be a problem for the vast majority of users and there are ways to display a file upload field for non-Flash users.
Click here for a script that uses APC for implementing a file upload progress bar instead of Flash.