title: Multiple file upload with progress bar
body: <p>I'm trying to upload multiple files with progress bars to show how much of the file has been uploaded. For some reason the files are not being uploaded and the progress bars only work for one upload. Please help me alter the code to work.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('.btnUpload').click(function(){
      //submit all form
      $('form').submit();
  });
  $(document).on('submit','form',function(e){
      e.preventDefault();
  
      $form = $(this);
  
      uploadImage($form);
  
  });
  
  function uploadImage($form){
      alert("in");
      $form.find('.progress-bar')
      var formdata = new FormData($form[0]); //formelement
      var request = new XMLHttpRequest();
  
      //progress event...
      request.upload.addEventListener('progress',function(e){
          var percent = Math.round(e.loaded/e.total * 100);
          $form.find('.progress-bar').width(percent+'%').html(percent+'%');
      });
  
      //progress completed load event
      request.addEventListener('load',function(e){
          $form.find('.progress-bar').html('upload completed....');
      });
  
      request.open('post', 'upload.php');
      request.send(formdata);
  
      $form.on('click','.cancel',function(){
          request.abort();
  
          $form.find('.progress-bar')
              .html('upload aborted...');
      });
  
  }/*
  function uploadFile(){
      $(document).ready(function (e) {
          $("#uploadForm").on('submit',(function(e) {
              e.preventDefault();
              $.ajax({
                  url: "upload.php",
                  type: "POST",
                  data:  new FormData(this),
                  contentType: false,
                  cache: false,
                  success: function(data){
                      $("#gallery").html(data);
                  },
                  xhrFields: {
                      // add listener to XMLHTTPRequest object directly for progress (jquery doesn't have this yet)
                      onprogress: function (progress) {
                          // calculate upload progress
                          var percentage = Math.floor((progress.total / progress.totalSize) * 100);
                          // log upload progress to console
                          console.log('progress', percentage);
                          if (percentage === 100) {
                              console.log('DONE!');
                          }
                      }
                  },
                  processData:false,
  
                  error: function(){}
              });
          }));
      });
  }*/</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;PHP AJAX Multiple Image Upload&lt;/title&gt;
      &lt;script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;SCRIPT SRC="upload.js"&gt;&lt;/SCRIPT&gt;
      &lt;link rel="stylesheet" type="text/css" href="style.css"&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="gallery-bg"&gt;
  &lt;form id="uploadForm" action="" method="post"&gt;
  &lt;div id="gallery"&gt;No Images in Gallery&lt;/div&gt;
  &lt;div id="uploadFormLayer"&gt;
  &lt;p class="txt-subtitle"&gt;Upload Multiple Image:&lt;/p&gt;
  &lt;p&gt;&lt;input name="userImage[]" type="file" class="inputFile" /&gt;&lt;p&gt;
      &lt;div class="progress"&gt;
          &lt;div class="progress-bar" style="width:0%"&gt;&lt;/div&gt;
          &lt;/div&gt;
  
  &lt;p&gt;&lt;input name="userImage[]" type="file" class="inputFile" /&gt;&lt;p&gt;
      &lt;div class="progress"&gt;
          &lt;div class="progress-bar" style="width: 0%;"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;p&gt;&lt;input name="userImage[]" type="file" class="inputFile" /&gt;&lt;p&gt;
      &lt;div class="progress"&gt;
          &lt;div class="progress-bar" style="width: 0%;"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;p&gt;&lt;input type="submit" value="Submit" class="btnUpload"  /&gt;&lt;/p&gt;
  &lt;/div&gt;
  &lt;/form&gt;
  &lt;/div&gt;
  
  &lt;!-- begin snippet: js hide: false --&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <pre><code>&lt;/body&gt;
  &lt;/html&gt;
  </code></pre>