title: Show a progress on multiple file upload Jquery/Ajax
body: <p>I have upload form that allows users to upload multiple files. I decided that a progress bar would be good if the files are quite large. Below is my source code. I am new to jquery normally I would just php but I find that ajax is more user friendly.</p>
  
  <pre><code>&lt;div id="new_upload"&gt;
      &lt;div class="close_btn"&gt;&lt;/div&gt;
      &lt;div id="uploads"&gt;&lt;/div&gt;
      &lt;form action="global.func/file_upload.php" method="post" enctype="multipart/form-data" id="upload_file"&gt;
      &lt;fieldset&gt;&lt;legend&gt;Upload an image or video&lt;/legend&gt;
      &lt;input type="file" id="file" name="file[]" placeholder="Upload Image or Video" multiple /&gt;&lt;input type="submit" value="upload file" id="upload_file_btn" required /&gt;
      &lt;/fieldset&gt;
  
      &lt;div class="bar"&gt;
          &lt;div class="bar_fill" id="pb"&gt;
              &lt;div class="bar_fill_text" id="pt"&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;/form&gt;
  &lt;/div&gt;
  &lt;script&gt;
  function OnProgress(event, position, total, percentComplete){    
      //Progress bar
      console.log(total);
      $('#pb').width(percentComplete + '%') //update progressbar percent complete
      $('#pt').html(percentComplete + '%'); //update status text
  }
  function beforeSubmit(){
      console.log('ajax start');
  }
  function afterSuccess(data){
      console.log(data);
  }
  $(document).ready(function(e) {
      $('#upload_file').submit(function(event){
          event.preventDefault();
          var filedata = document.getElementById("file");
          formdata = new FormData();
          var i = 0, len = filedata.files.length, file;
           for (i; i &lt; len; i++) {
              file = filedata.files[i];
              formdata.append("file[]", file);
          }
          formdata.append("json",true);
          $.ajax({
              url: "global.func/file_upload.php",
              type: "POST",
              data: formdata,
              processData: false,
              contentType: false,
              dataType:"JSON",
              xhr: function() {
                  var myXhr = $.ajaxSettings.xhr();
                  return myXhr;
              },
              beforeSubmit: beforeSubmit,
              uploadProgress:OnProgress, 
              success: afterSuccess,
              resetForm: true
          });
      });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>The image upload works fine, the array send to ajax but the progress bar doesn't move. In fact the console.log for the two functions called need to produce this don't appear either. Is there a correct way to call the functions in my ajax request that would get this progress bar to work.</p>
  
  <blockquote>
    <p>beforeSubmit: beforeSubmit, 
    uploadProgress:OnProgress,
    success: afterSuccess,</p>
  </blockquote>
  
  <p>NOTE that this function 'success: afterSuccess' is working as the console is displaying my data.</p>