javascript 使用 jquery ajax 和 FormData 跟踪文件上传的 ajax 发布进度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14002393/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Track ajax post progress for fileupload using jquery ajax and FormData
提问by Kim Stacks
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};
}
How do I track the progress of the file upload if I want to retain this method to upload files to server?
如果我想保留这种上传文件到服务器的方法，如何跟踪文件上传的进度？
回答by Kim Stacks
Note the comment with @TODO
请注意@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,
Add a standalone function that updates the progress.
添加一个更新进度的独立函数。
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');
}
}
From https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest> Monitoring progress
从https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest> 监控进度
