jquery ajax ve FormData kullanarak dosya yüklemesi için ajax sonrası ilerlemesini izleme

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}; 
} 

Dosyaları sunucuya yüklemek için bu yöntemi saklamak istiyorsam, dosya yüklemesinin ilerlemesini nasıl izlerim?

Answer 1

Not @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, 

ile açıklama ilerleme günceller bağımsız bir fonksiyonu ekleyin. ilerlemeyi