File Upload with Progress Bar using jQuery and PHP

In this post you will learn how to create a AJAX file uploading system with progress bar using jQuery and PHP. For this purpose we will going to use jQuery Form Plugin. It is a easy to use and powerful jQuery AJAX form submitting plugin. It supports XMLHttpRequest Level 2 and iframe file transportation. That's why it will work for both old and new browsers.

The form is the heart of this html page. It will allow as to upload file. Before closing body tag I have inserted three JavaScript files. These are jQuery library, jQuery form plugin and our main script file.

Step 2 - jQuery

This is our main JavaScript file. There are two part of this file. The first one is image preview (based on HTML5 FileReader api) and second one is jQuery AJAX form submit (based on jQuery Form plugin).

Hallo, I am from Indonesia. Sorry if my english is wrong. I just wanted to thank you, because finally I found this tutorial for 3 years, I think this is the best and perfect for me, simple but powerful. Very great post

Found a small issue, after uploading image, the message is shown "Image Successfully uploaded!" but the progress bar shows 60% completed.I've screenshot to help replicate it but not sure where to attach with this post.

I want to upload four pictures with the same site. I know how to change the html-site (rename the ID's). But I don't know how to change the script.js. I don't want to write the function four times. Can me help somebody?

here is a zip file of the code.. https://drive.google.com/file/d/0BzI3iLzL-4VUaHdCTHViLUFEeFE/edit?usp=sharingnow does anyone know how to change the size of the preview image that i am getting on the front page just above the upload button...i have tried to set width and height but it is not working...reply asap....

I would like to send you 50 dollars by PayPal for your helping me to find a solution…

I have your very nice ‘Multiple File Upload with Progress Bar’ working on my site. It displays the progress bar and uploads files properly.

MY NEED:When it finishes the upload, I need for it to refresh to a different page within my site… “mypage.php?var1=this&var2=that”

FYI:I must have corrupted something, because now, it does not display {count:n} when upload is complete and the URL in the browser location field does not change FROM “/multiple-file-upload-progress-bar/“ TO “/multiple-file-upload-progress-bar/upload.php”

If you can help, please tell me how to contact you privately so that I can send the money and site access information privately. I can be reached creekriot at gmail.

hey . i know this is old. but this is for some who has not solved this problem. the error are in the script.js in this line after you downloaded the zip file . you will noticed in this line >/* set data type json */dataType:'json', .there a some sort of a html entities appeared after the ":" . juts rid of it . and everyone's happy ! :D