December 5, 2013 8:23 am

How to Upload Image using jQuery with progress in PHP

We received many requests from our readers to write some tutorial on upload image with jQuery and show progress bar so here it is, in this tutorial we are using ajax form library to upload image and show a progress in percentage (%) after complete upload show that image on page. Image will be saved on server for that we used PHP coding.

How to Upload Image using jQuery with progress in PHP


This file Contains html form to upload image

jQuery libraries required to process:

Main jQuery code for upload file and progress bar:

Styling Progress bar

Used CSS for styling of progress bar.


Contains back end server side script to handle image and move to uploads directory after adding random number in file name.

$Destination = ‘uploads’ is destination folder and after changing we used move_uploaded_file function to move file from temporary location to uploads directory and after that show this image on page.

Upload form all together

This is the complete file code with jquery and css.


If you have any issue in its configuration or want to suggest some thing please feel free to comment. For your ease we make its demo and script to download.

Author Huzoor Bux

I am Huzoor Bux from Karachi (Pakistan). I have been working as a PHP Developer from last 5+ years, and its my passion to learn new things and implement them as a practice. Basically I am a PHP developer but now days exploring more in HTML5, CSS and jQuery libraries.

Tutorial Categories:
  • bob

    Awesome tutorial ! But to rename image better with time function like

    $RandomNum = time();

  • siddhu

    enjoying the code ….super sir

  • kobi

    i can’t download sir how can i download sir pls?

  • imran

    awesome sir…

  • Brubru

    This code is just what I needed, short, efficient and understandable! Thank you sir

  • Marcello Patto

    Hi dude, how do I uptade my database with those file names?
    Check this out:

    var settings = {
    url: “upload.php?id_cliente=””, (<— Added this code! –)
    method: "POST",


    move_uploaded_file($_FILES[“myfile”][“tmp_name”],$output_dir. $NewImageName);
    $sql = “UPDATE tb_cliente SET docs = ” . $NewImageName . ” WHERE id_cliente = ” . $_POST[‘id_cliente’]; (<— Added this code! –)

    But with no sucess… can you please help me with that?

    • MitchelAwesome

      What is your error exactly?

      • Marcello Patto

        Nothing happens at all! The upload.php dont get the “?id_cliente…” code from the url.Should be a easylly way to do it…

  • Sunny

    Hi there!.. this code works perfect.. but how am i suppose to get two different output if i am using the same code at two different places in the same page..

  • priyadarshini


    The code is very useful and easy to understand but only one thing am not able to find is adding cancel button when upload is in progress and when clicked the progress process have to be aborted immediately. can you please help me with this.

  • Ramesh

    how can I put browse button to under displayed images list?

  • Kazi Nayem

    sorry, this gives following error. give me a solution to resolve it please…………………..

    Warning: move_uploaded_file(uploads/5-3570198873.jpg): failed to open stream: Permission denied in /var/www/upload-image-progress-with-jquery/processupload.php on line 24

    Warning: move_uploaded_file(): Unable to move ‘/tmp/phpnKFODb’ to ‘uploads/5-3570198873.jpg’ in /var/www/upload-image-progress-with-jquery/processupload.php on line 24

  • Code works very Well. Excellent Sir.
    Prefer to add a date or consecutive number index derived from a database but that is icing on the cake.
    I would dearly love to be able to preprocess files to compress larger images down to a small sixe before saving in the server directory.