title: Track ajax post progress for fileupload using jquery ajax and FormData
body: <pre><code>var files = [];
  
  $(document).ready(function (){
      dropArea = document.getElementById("droparea");
  });
  
  // when we drag and drop files into the div#droparea
  dropArea.addEventListener("drop", function (evt) {
      files = evt.dataTransfer.files;
  }, false);  
  
  function uploadFiles(stepX) {
      var url = "/ajax/uploadfiles.php";
      var type = "POST";
  
      if (files.length &gt; 0) {
           var data = new FormData(); // we use FormData here to send the multiple files data for upload
  
            for (var i=0; i&lt;files.length; i++) {
         var file = files[i];
               data.append(i, file);  
     }
           //start the ajax
           return $.ajax({
     //this is the php file that processes the data and send mail
           url: url,  
  
    //POST method is used
    type: type,
  
     //pass the data          
     data: data,      
  
      //Do not cache the page
            cache: false,
  
  // DO NOT set the contentType and processData
  // see http://stackoverflow.com/a/5976031/80353
  contentType: false,
  processData: false,
  
  //success
        success: function (json) {                
        //if POST is a success expect no errors
       if (json.error == null &amp;&amp; json.result != null) {                   
                      data = json.result.data;
  
                  // error 
                  } else {
                      alert(json.error);  
                  }           
              }       
          });
      } 
      return {'error' : 'No files', 'result' : null};
  }
  </code></pre>
  
  <p>How do I track the progress of the file upload if I want to retain this method to upload files to server?</p>