title: Ajax form submission progress function failing?
body: <p>I'm submitting a form via ajax and trying to update a simple progress bar while it's uploading. The form submission works perfectly but I can't get the progress bar to update or even request the currently loaded amount.</p>
  
  <pre><code>&lt;form enctype="multipart/form-data"&gt;          
      &lt;input name="file" type="file" /&gt;
      &lt;button&gt;Update Account&lt;/button&gt;
  &lt;/form&gt;
  &lt;progress value="0" max="100"&gt;&lt;/progress&gt;
  </code></pre>
  
  <p><strong>jQuery + Ajax</strong></p>
  
  <pre><code>$(document).on("submit", "form", function(){
  
      var formData = new FormData($('form')[0]);
  
      $.ajax({
          url: window.location.pathname,
          type: 'POST',
          xhr: function() {
              myXhr = $.ajaxSettings.xhr();
              if(myXhr.upload){
                  myXhr.upload.addEventListener('progress', progressHandlingFunction, false);
              }
              return myXhr;
          },
          async:false,
          data: formData,
          cache: false,
          contentType: false,
          processData: false
      });
  });
  </code></pre>
  
  <p>Upon submitting the form should run <code>addEventListener</code> so that this function is run to update the progress:</p>
  
  <pre><code>function progressHandlingFunction(e){
      if(e.lengthComputable){
          $("progress").attr('value', e.loaded);
          $("progress").attr('max', e.total);
      }
  }
  </code></pre>
  
  <p>but any functions inside <code>myXhr.upload.addEventListener();</code> just do not seem to run?</p>
  
  <pre><code>myXhr.upload.addEventListener('progress', alert("test"),  false);
  </code></pre>
  
  <p>works fine, but the below does not run, why would this happen?:</p>
  
  <pre><code>myXhr.upload.addEventListener('progress', function(){alert("test")},  false);
  </code></pre>
  
  <p>This example uses similar coding:</p>
  
  <p><a href="http://www.matlus.com/html5-file-upload-with-progress/" rel="nofollow">http://www.matlus.com/html5-file-upload-with-progress/</a></p>