Today we are going to create an image upload and resize script with a progress bar. This is an extension of my previous tutorial about image upload and resize script using jQuery and PHP, I suggest you go though that tutorial, because only thing we are going to add here is a progress-bar.
Progress-bar requires modern browsers that support XMLHttpRequest 2. It’s HTML5 feature that adds more functionality to Ajax request, additionally we can monitor the progress of data transfers. Thankfully all modern browsers support this feature.
Below is our HTML form. As you can see this is exactly the same form as shown in previous example, only thing I have added here is progressbar element.
This CSS will transform our DIV element into a nice looking progress-bar. You are welcome to change its appearance as you prefer.
To bring our progress-bar in life, I’ve added behavior to XMLHttpRequest function in jQuery Ajax code. XMLHttpRequest provides us with the ability to listen to progress events while the request is being processed. We can capture the arguments passed by XMLHttpRequest function and use them to change width and text of progressbar real-time.
Everything else in this script is same as Ajax Image upload, you should find rest of the code in sample file below. Good luck!