how to make jquery progress bar for file upload(PHP and Jquery)

today we are going to make Jquery progress bar demo let’s start with it.this tutorial main focus is jquery progress bar when upload the images. we can used the form library and target selector for preview the image on submit.

Final output

jQuery Progress Bar for PHP File Upload

Download Code

let’s start with form making. give it the any name i prefer the name index.php file. when user press the submit button some actions are triggers using jquery. we should display the progress bar until value doesn’t return 100% after progress bar done image will be displaying directly on that image div


now create the another file called as upload.php file. when user press the submit button that file is call as we given the form action on index.php file.

now simply add that code when file doesn’t empty. create folder inside that directory called as images. we used the move_uploaded_file function to move that file to server.


  • Sivashan Sivakumaran

    Can you please tell me how can I show the uploaded file URL in another page after upload completed?