前段时间,我写了一个看起来像这样的脚本:
$("#file-upload-button").click(function(e) {
e.preventDefault();
var data = new FormData();
jQuery.each($('#file-upload')[0].files, function(i, file) {
data.append('file', file);
});
$.ajax({
type: "POST",
url: self.urlroot + '/file/upload',
data: data,
contentType: false,
processData: false,
xhr: function() {
var xhr = new window.XMLHttpRequest();
//Upload progress
xhr.upload.addEventListener("progress", function(evt){
if (evt.lengthComputable) {
var percentComplete = evt.loaded / evt.total;
console.log(percentComplete);
//more stuff
}
}, false);
//Download progress
xhr.addEventListener("progress", function(evt){
//something similar to above
}, false);
return xhr;
},
success: function( response ) {
//stuff
},
error: function() {
//stuff
}
});
});
它运作得很好。今天我尝试在另一个页面上重用代码,并且我已经确定evt.loaded不再跟踪已经发送到服务器的数量,而是跟踪已经将多少文件加载到内存中< em>将发送到服务器。因此,它几乎立即达到100%,因为文件非常快速地加载到内存,而没有准确指示已经发送到服务器的数量。我尝试将代码更新为以下内容,但无济于事:
$("#file-upload-button").change(function(e) {
e.preventDefault();
$("button").attr("disabled", true).fadeTo("fast", 0.5);
var data = new FormData();
jQuery.each($('#file-upload')[0].files, function(i, file) {
data.append('file', file);
});
var xhr = new XMLHttpRequest;
xhr.upload.onprogress = function (evt) {
var percentComplete = evt.loaded / evt.total;
console.log(percentComplete, evt.loaded, evt.total);
//some stuff
};
xhr.upload.onload = function (e) {
//some stuff
};
xhr.upload.onerror = function (e) {
//some stuff
};
xhr.open("POST", "Owl/");
xhr.send(data);
});
在这两个实例中,它几乎立即显示evt.loaded与evt.total相同,然后几秒钟后根据文件的大小,上传实际完成并处理响应。知道如何解决这个问题,以实际显示上传的进度吗?