Back 4 Comments

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.

August 12, 2012 7:31am
cannot click upload images for Google Chrome.
August 13, 2012 9:04am
The script should work fine in Chrome as long as Flash is installed.
August 13, 2012 9:37am
I installed flash already but still cannot click upload images. Google Chrome Version 22.0.1229.2 Thanks.
AbuHuraira Lakdawala
January 31, 2013 4:34am

Your comment has been posted....