title: Displaying a progress bar showing the progress of a form submission
body: <p><strong>This question is not totally answered, please fell free to contribute !</strong></p>
  
  <hr />
  
  <p>I'm trying to display a simple <code>progress bar</code> while a large form is submitted.<br />
  <br />
  The form contains a dozen of fields, plus some file upload fields, where the user can select a picture. Then, when he clicks on a <code>Create</code> button, the form with data and pictures are submitted and the entity is created in DB. (only one click to submit the form AND the pictures).<br />
  Everything works fine, but I'd like to display a progress bar during the submit process.<br />
  <br />
  I have found <em>a lot</em> of tutorials explaining how to display a progress bar, but I don't find anyone explaining how to <strong>display a progress bar indicating the percentage of work accomplished by a method</strong>, ie, I'd like to see 10%, 25%, etc... during the submit process.
  <br /><br />
  So, basically, this is what I've done : (this is an ASP.NET MVC3 project)</p>
  
  <pre><code>@model MyModel
  
  @using (Html.BeginForm(null, null, FormMethod.Post, new { id = "target-form", enctype = "multipart/form-data" }))
  {
      //some Html.TextBoxFor() and other @Html.DropDownListFor
  
      @Html.TextBoxFor(m =&gt; m.File, new { type = "file"})
  
      &lt;input type="submit" value="Create" class="submitButton" /&gt;
  
      &lt;div id="progressBar"&gt;&lt;/div&gt;
  }
  </code></pre>
  
  <p>And a basic controller</p>
  
  <pre><code>[HttpPost]
  public ActionResult Create(MyModel model)
  {
      if (ModelState.IsValid)
      {
          DALLayer dal = new DALLayer()
          dal.AddEntity(model);
  
          return RedirectToAction("Index", "Home");
      }
  
      return null;
  }
  </code></pre>
  
  <p>Is it possible to transform my last <code>&lt;div&gt;</code> in a <code>progressBar</code> displaying the state of upload progress ?</p>
  
  <p><br />
  Here are my requirements :</p>
  
  <ul>
      <li>No plugin (this is a personnal project, I want to understand how to do this by myself).</li>
      <li>Cross compatible, IE8+ (if possible)</li>
      <li>jQuery ok, but no Flash.</li>
  </ul>
  
  <p><br />
  Thank you very much !
  <br /><br />
  <strong>UPDATE 1</strong>
  Here is a <a href="http://jsfiddle.net/bF5ap/" rel="nofollow noreferrer">JSFIDDLE</a>, where I'm trying to adapt <a href="http://www.dotnetbips.com/articles/859d32c8-945d-4e5d-8c89-775388598f62.aspx" rel="nofollow noreferrer">this link</a> but without success... If you think you can help, you're welcome !<br />
  <br />
  <br />
  <strong>UPDATE 2</strong>
  Ok, I used <a href="https://stackoverflow.com/questions/21902385/displaying-a-progress-bar-showing-the-progress-of-a-form-submission/22125382?noredirect=1#22125382">acarlon's answer</a> to submit my form with <code>XMLHttpRequest</code> and the datas are correcty posted to the controller. However, the ProgressBar still doesn't appear !<br>
  I just replace the data passed to the controller by :</p>
  
  <pre><code>formData = new FormData(document.getElementById("target-form") );
  xhr.open("POST", "@Url.Action("MyMethod", "MyController")", true );
  </code></pre>
  
  <p>and try some different headers, like :</p>
  
  <pre><code>xhr.setRequestHeader("X-File-Name", $('#Files_0__File')[0].files[0].name);
  xhr.setRequestHeader("X-File-Size", $('#Files_0__File')[0].files[0].size);
  xhr.setRequestHeader("X-File-Type", $('#Files_0__File')[0].files[0].type);
  //Also tried with "Content-Length" but it doesn't care about it.
  </code></pre>
  
  <p>(It was hardcoded here to be sure it has good values. I'll do it in a loop when I'll be more at ease with it.)</p>
  
  <p>And when I submit my form, the <code>XMLHttpRequest</code> send has these fields :</p>
  
  <blockquote>
    <p>readyState: 4<br>
    status: 0  &lt;= should be 200, right ?</p>
  </blockquote>
  
  <p>And in the <code>error handler</code>, I have these values :</p>
  
  <blockquote>
    <p>loaded: 0<br>
    total: 883526<br>
    type: "error"</p>
  </blockquote>
  
  <p>So the data are submitted to my controller, but I'm unable to display this damned progressbar...</p>