title: Progress Bar for file uploads to PHP using AJAX and Bootstrap
body: <p>I have a form with which I upload images using AJAX to a PHP Script</p>
  
  <p>This is my form</p>
  
  <pre><code>&lt;form action ="upload.php" method = "POST" enctype = "multipart/form-data" class = "form-horizontal" name="formData" id="data"&gt;
          &lt;!--File Upload--&gt;
              &lt;div class = "form-group"&gt;
                  &lt;label class="control-label col-sm-1" for = "file"&gt;File:&lt;/label&gt;    
                      &lt;div class="col-sm-9"&gt;
                          &lt;input type = "file" name = "image_file" id = "image_file"  class = "form-control" accept="image/*" onChange="autoPull(this.value)";&gt;
                      &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class = "form-group"&gt;
                  &lt;label class="control-label col-sm-1" for = "project_name"&gt;ProjectName:&lt;/label&gt;
                      &lt;div class="col-sm-9"&gt;
                          &lt;input type = "text" name ="project_name" id = "project_name" class = "form-control" placeholder="Enter Project Name"  value = "" required&gt;
                      &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class = "button"&gt;
                  &lt;div class="form-group"&gt;
                      &lt;div class="col-sm-offset-1 col-sm-6"&gt;
                          &lt;input type="submit" name = "submit" class="btn btn-primary" value = "Submit" id="file_upload"&gt;
                          &lt;input type="reset" name = "submit" class="btn btn-default" value = "Reset"&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/form&gt;
          &lt;br/&gt;
              &lt;div class="progress" style="display:none;"&gt;
                &lt;div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width:0%;"&gt;
  
                &lt;/div&gt;
              &lt;/div&gt;
          &lt;div id = "result"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>The result div is where the output from PHP is displayed(see in AJAX)</p>
  
  <p>Progress bar is where I wish to see my bootstrap progress bar.</p>
  
  <p>and this is my AJAX </p>
  
  <pre><code>$(function () {
          $('form#data').submit(function (e){
              e.preventDefault();
              e.stopImmediatePropagation();
              var formData = new FormData($(this)[0]);
              var file = $('input[type=file]')[0].files[0];
              formData.append('upload_file',file);
              $('.progress').show();
              $.ajax({
                  xhr: function() {
                      var xhr = new window.XMLHttpRequest();
                      xhr.upload.addEventListener("progress", function(evt) {
                          if (evt.lengthComputable) {
                              var percentComplete = evt.loaded / evt.total;
                              percentComplete = parseInt(percentComplete * 100);
                              $('.progress-bar').css('width',percentComplete+"%");
                              $('.progress-bar').html(percentComplete+"%");
                              if (percentComplete === 100) {
  
                          }
                        }
                      }, false);
                      return xhr;
                    },
                  type:'POST',
                  url: 'upload.php',
                  data: formData,
                  async:false,
                  cache:false,
                  contentType: false,
                  processData: false,
                  success: function (returndata) {
                      $('#result').html(returndata);  
                  }
              });
              return false;
          }); 
  });
  </code></pre>
  
  <p>Now I get an output which shows me the data echoed in the PHP. But for some reason I cant get the progress bar to work.</p>
  
  <p>What could be the issue?</p>