Ajax Image Upload with Progressbar with jQuery and PHP
If you are looking for a nice simple jQuery / PHP based Ajax image uploader script, fear not because we are going to create one here in this tutorial. In my previous post, I had created a simple Ajax image upload with jQuery and PHP, we will follow the same procedure but the only thing we are going to add is the progress-bar.
Please Note, the progress-bar only works with modern browsers that support XMLHttpRequest 2 feature, XMLHttpRequest 2 is a new HTML5 feature that adds more functionality to AJAX requests like file uploads, transfer progress information and the ability to send form data.
Let’s start by writing HTML form, our form is same as any normal looking form containing some input fields and submit button. I have used HTML table to wrap the input fields here, just to speed up things, but you can use <DIV> elements, labels and CSS to make a proper looking form. If you look at the bottom of the form, you can see <DIV> elements called progressbox, progressbar and status text, we will style these elements and transform them into a nice looking progress bar.
Styling Progress Bar
Here’s what our CSS file looks like, this will transform <DIV> into a nice looking progress-bar. The outer progress box is set to 400 pixel width, with a 1 pixel border around it, its display property is set to none initially, we will only display it when upload starts, and then we style the inner box which will fill progess box when uploading starts.
Now the jQuery part that does the trick. If you read the comments in the code below, the code itself becomes self explanatory. The modern browsers that support XMLHttpRequest Level 2 has the ability to upload files seamlessly, and also get the progress information as the file uploads.
Upload From (Putting it all together)
Here’s our complete File uploader page, the jQuery goes to <HEAD> section of the HTML page and the Form goes within the <BODY> part. Main task of this page is to send the image files to processing PHP page, along with some user variables regarding the file.
PHP Processing page
This PHP page does the server side task of processing the image files we received from Upload form. This PHP page is basically taken from my earlier post, so everything here remains the same. As you can see you can change the values at the top of the PHP code, you need to specify destination directory, thumbnail and maximum size of the file. Then the next step is to set the random file name, check for allowed file types and then we resize and create 2 image files (thumbnail and big image) out of the uploaded image file. Then we output the files to the browser. Please take a look at the code below, I have inserted the comment lines in the code, which will explain each steps for you.
The scrip is very intermediate level, if you read the comment lines in the script carefully you should be clear about the whole process. You can also download the sample from bottom of this page and test it out in your own server or even integrate it on your website. Good luck!
Saran Chamling. (He loves the web technology, and enjoys designing, exploring and writing about it @saaraan.com).