File Upload Progress Bar using PHP and jQuery Form Plugin

In this post we will learn how to create a File Upload Progress Bar. We also covered a tutorial about ajax file upload. But  in that tutorial we were not showing the progress of the file upload. As showing a progress bar when the file is getting uploaded to the server is an essential feature.

For server side I will be going to use PHP. We will also use HTML and CSS for the designing of our File Upload Progress Bar. To implement the progress bar we will use jQuery Form Plugin.

Before starting the tutorial you can checkout this video demo of the File Upload Progress Bar.

Creating our PHP Project

  • I am using wamp server. You can use any of the PHP Server. So for wamp we have to the root directory which is www (c:/wamp/www) in wamp’s case.
  • Now create a new folder inside the root directory. I created fileupload.
  • First create an html file named index.html. Inside this file we will create our html form. You can create the form using the following code.

  • Now we need to create upload.php file to handle the file upload.

  • Now finally we need to write the following script inside the html page to make it work.

  • Thats it, now try running your app. You can see the output below.

file upload progress bar

  • We can make it more cool using CSS.

Applying CSS in File Upload Progress Bar

  • First modify your index.html file as below.

  • And create a file named style.css and add the following css code.

  • Now you will see the following output.

file upload progress bar

  • You can go to this link to test the uploader.
  • You can also download my source code if having trouble.

So thats all for this File Upload Progress Bar tutorial. Feel free to ask if having any confusions or queries regarding this tutorial. Thank You 🙂

3 thoughts on “File Upload Progress Bar using PHP and jQuery Form Plugin”

  1. it’s only upload a image?
    iwant upload any of file how to do it?
    i show error when i’m upload a .exe file or video file


Leave a Comment