title: Ajax web api File Upload With Progress bar
body: <p>I'm trying out this code to upload file to the server,</p>
  
  <p><strong>Html:</strong></p>
  
  <pre><code>&lt;input type="file" id="file1" name="browsefile" multiple="multiple"  accept="video/mp4,video/*"&gt;
  </code></pre>
  
  <p><strong>JavaScript:</strong></p>
  
  <pre><code>function FileUpload(SomestringParameter) {
      var files = $("#file1").get(0).files;
      if (files.length &gt; 0) {
          if (window.FormData !== undefined) {
              var data = new FormData();
              for (i = 0; i &lt; files.length; i++) {
                  data.append("file" + i, files[i]);
          }
          $.ajax({
              type: "POST",
              url: "http://localhost:50443/UploadFile/" + SomestringParameter,
              contentType: false,
              processData: false,
              data: data,
              success: function (results) {
                  alert(results);
                  for (i = 0; i &lt; results.length; i++) {
                      alert(results[i]);
                  }
              }
          });
  
      } 
      else {
          alert("This browser doesn't support HTML5 multiple file uploads!");
      }
  }
  }
  </code></pre>
  
  <p><strong>In Web Api Controller</strong>,</p>
  
  <pre><code>[HttpPost]
  [ActionName("UploadFile")]
  public HttpResponseMessage UploadFile([FromRoute]string SomeStringData)
  {
      // Save the uploaded file here on the server
  }
  </code></pre>
  
  <p>The File is uploaded perfectly, My question is how to show progress bar, I'm using jquery mobile for designing. </p>
  
  <p><strong>How could I show a progress bar with percentage or something?</strong></p>