title: Can onprogress functionality be added to jQuery.ajax() by using xhrFields?
body: <p>As suggested here: <a href="https://gist.github.com/HenrikJoreteg/2502497" rel="nofollow noreferrer">https://gist.github.com/HenrikJoreteg/2502497</a>, I'm trying to add onprogress functionality to my <code>jQuery.ajax()</code> file upload.  The upload works fine, and the onprogress event is firing, but not as I expected--instead of firing repeatedly at some time interval, it's firing only once, when the upload has completed.  Is there a way to specify the frequency of onprogress refreshes?  Or, am I trying to do something that can't be done?  Here's my code:</p>
  <pre class="lang-js prettyprint-override"><code>    $.ajax(
      {
          async: true,
          contentType: file.type,
          data: file,
          dataType: 'xml',
          processData: false,
          success: function(xml)
          {
              // Do stuff with the returned xml
          },
          type: 'post',
          url: '/fileuploader/' + file.name,
          xhrFields:
          {
              onprogress: function(progress)
              {
                  var percentage = Math.floor((progress.total / progress.totalSize) * 100);
                  console.log('progress', percentage);
                  if (percentage === 100)
                  {
                      console.log('DONE!');
                  }
              }
          }
      });
  </code></pre>
  <hr />
  <p>Well, it's been a few years. I revisited this, and using <a href="https://stackoverflow.com/users/25700/getfree">GetFree</a>'s answer, I updated my code to the following:</p>
  <pre class="lang-js prettyprint-override"><code>$('#file_input').change(function()
  {
      var file = this.files[0];
      $('#upload_button').click(funtion(e)
      {
          req = new XMLHttpRequest();
          req.upload.addEventListener('progress', updateProgress, false);
          req.addEventListener('load', transferComplete, false);
          var url  = 'https://my.url'; 
          req.open('POST', url, true);
          req.setRequestHeader('Content-Type', myFileType);
          req.setRequestHeader('Content-Length', myFileLength);
          req.send(file);
      });
  );
  function updateProgress(e)
  {
      var percent = Math.floor(e.loaded / e.total * 100);
      console.log(&quot;percent = &quot; + percent);
  }
  function transferComplete(e)
  {
      console.log(&quot;transfer complete&quot;);
  }
  </code></pre>
  <p>I have marked GetFree's post as the accepted answer.  Sorry for the delay.</p>