jquery AJAX और FormData

Question

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 > 0) { 
     var data = new FormData(); // we use FormData here to send the multiple files data for upload 

      for (var i=0; i<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 && json.result != null) {     
        data = json.result.data; 

       // error 
       } else { 
        alert(json.error); 
       }   
      }  
     }); 
    } 
    return {'error' : 'No files', 'result' : null}; 
} 

का उपयोग करके फ़ाइल अपलोड के लिए AJAX पोस्ट प्रगति को ट्रैक करें यदि मैं सर्वर पर फ़ाइलों को अपलोड करने के लिए इस विधि को बनाए रखना चाहता हूं तो फ़ाइल अपलोड की प्रगति को कैसे ट्रैक करूं?

Answer 1

नोट @TODO

//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, 

      //@TODO start here 
      xhr: function() { // custom xhr 
       myXhr = $.ajaxSettings.xhr(); 
       if(myXhr.upload){ // check if upload property exists 
        myXhr.upload.addEventListener('progress',progressHandlingFunction, false); // for handling the progress of the upload 
       } 
       return myXhr; 
      }, 
      //@TODO end here 

      // DO NOT set the contentType and processData 
      // see http://stackoverflow.com/a/5976031/80353 
      contentType: false, 
      processData: false, 

साथ टिप्पणी एक स्टैंडअलोन समारोह है कि प्रगति को अद्यतन करता जोड़ें।

function updateProgress(evt) { 
    console.log('updateProgress'); 
    if (evt.lengthComputable) { 
      var percentComplete = evt.loaded/evt.total; 
      console.log(percentComplete); 
    } else { 
      // Unable to compute progress information since the total size is unknown 
      console.log('unable to complete'); 
    } 
} 

https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest> निगरानी प्रगति