Show a progress on multiple file upload Jquery/Ajax

This is your HTML form

<form method="post" action="uploadImages.php" name ='photo' id='imageuploadform' enctype="multipart/form-data">        <input hidden="true" id="fileupload" type="file" name="image[]" multiple >        <div id ="divleft">            <button id="btnupload"></button>        </div>        </form>

This is your JQuery and ajax.By default the fileInput is hidden.

Upload Button clicked

$("#btnupload").click(function(e) {    $("#fileupload").click();    e.preventDefault();});$('#fileupload').change(function (e) {    $("#imageuploadform").submit();    e.preventDefault();});$('#imageuploadform').submit(function(e) {    var formData = new FormData(this);    $.ajax({        type:'POST',        url: 'ajax/uploadImages',        data:formData,        xhr: function() {                var myXhr = $.ajaxSettings.xhr();                if(myXhr.upload){                    myXhr.upload.addEventListener('progress',progress, false);                }                return myXhr;        },        cache:false,        contentType: false,        processData: false,        success:function(data){            console.log(data);          alert('data returned successfully');        },        error: function(data){            console.log(data);        }    });    e.preventDefault();});function progress(e){    if(e.lengthComputable){        var max = e.total;        var current = e.loaded;        var Percentage = (current * 100)/max;        console.log(Percentage);        if(Percentage >= 100)        {           // process completed          }    }   }

Your php code looks like this

<?phpheader('Content-Type: application/json');       $valid_exts = array('jpeg', 'jpg', 'png', 'gif'); // valid extensions        $max_size = 30000 * 1024; // max file size in bytes        $json = array();            if ( $_SERVER['REQUEST_METHOD'] === 'POST' )            {                for($i=0;$i<count($_FILES['image']['tmp_name']);$i++)                {                    $path="image/uploads/photos/";                    if(is_uploaded_file($_FILES['image']['tmp_name'][$i]) )                    {                      // get uploaded file extension                      $ext = strtolower(pathinfo($_FILES['image']['name'][$i], PATHINFO_EXTENSION));                      // looking for format and size validity                          if (in_array($ext, $valid_exts) AND $_FILES['image']['size'][$i] < $max_size)                          {                                  // unique file path                                  $uid = uniqid();                                  $date = date('Y-m-d-H-i-s');                                  $path = $path ."image_" .$date. '_' . $uid . "." .$ext;                                  $returnJson[]= array("filepath"=>$path);                                  $filename = "image_" . $date . "_" .$uid . "." . $ext;                                  $this->createthumb($i,$filename);                                    // move uploaded file from temp to uploads directory                                  if (move_uploaded_file($_FILES['image']['tmp_name'][$i], $path))                                  {                                    //$status = 'Image successfully uploaded!';                                      //perform sql updates here                                  }                                  else {                                    $status = 'Upload Fail: Unknown error occurred!';                                  }                          }                          else {                            $status = 'Upload Fail: Unsupported file format or It is too large to upload!';                          }                    }                    else {                      $status = 'Upload Fail: File not uploaded!';                    }                }              }            else {              $status = 'Bad request!';            }            echo json_encode($json);?>

You must use a custom XMLHttpRequest to do this with AJAX and jQuery. There's an example here: How can I upload files asynchronously?