title: JS ProgressEvent is only fired when finished
body: <p>I am having some problems getting my upload progress bar to work properly.</p>
  
  <p>According to the XMLHttpRequest Level 2 specs, I attached event listeners for loadstart and progress like this:</p>
  
  <pre><code>var xhr = $.ajaxSettings.xhr();
  xhr.upload.addEventListener('loadstart', function(e) {progressCallback(0);});
  xhr.upload.addEventListener('progress', function (e) {
      progressCallback(e.loaded / e.total);
  });    
  
  $.ajax({
      url: url,
      type: 'POST',
      processData: false,
      contentType: false,
      data: formData,
      xhr: function () {
          return xhr;
      }
  }).done(function (data) {
      // Finish stuff
  })
  </code></pre>
  
  <p>The file is correctly uploaded but the progress listener is only called once the request is finsished with 100% (e.total == e.loaded)</p>
  
  <p>Is anything wrong with the code above or is it necessary to configure the server in any special way?</p>