Blog > December 2011

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.