title: XMLHttpRequest progress event advances much faster than the actual upload
body: <p>I'm trying to implement an upload form and return the upload status to return tot he user using xhr. Everything seems to be implemented correctly, however when uploading, the callbacks seem to occur way too quick and return a much higher percentage than has actually occurred.</p>
  
  <p>With files ~&lt;20Mb, I get a callback immediately which shows over 99% while the upload continues to churn away for some time in the background.</p>
  
  <p>See the below screengrab showing the console from a 74Mb file. This was taken a couple of seconds after the upload was initialised and the upload continued for another ~60 seconds (notice just 3 callbacks registering (loaded totalsize) (calculatedpercentage) and the ajax upload continuing with the throbber).</p>
  
  <p>Has anyone experienced this and managed to get an acurate representation of upload status?</p>
  
  <p>(the 'load' event triggers correctly after the upload process)</p>
  
  <p>Here's my code:</p>
  
  <pre><code>$(this).ajaxSubmit({
      target: '#output',
      beforeSubmit:  showRequest,
      xhr: function()
      {
          myXhr = $.ajaxSettings.xhr();
          if (myXhr.upload)
          {
              console.log('have xhr');
              myXhr.upload.addEventListener('progress', function(ev){
                  if (ev.lengthComputable) {
                      console.log(ev.loaded + " " + ev.total);
                      console.log((ev.loaded / ev.total) * 100 + "%");
                  }
              }, false);
  
          }
          return myXhr;
      },
      dataType: 'json',
      success:  afterSuccess
  });
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/FtHaD.jpg" alt="enter image description here"></p>