使用jquery ajax和FormData跟踪fileupload的ajax post进度

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

如果我想保留此方法将文件上传到服务器，如何跟踪文件上传的进度？

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 >监控进度