使用JavaScript上传文件-如何获取更频繁的进度事件
使用JavaScript上传文件-如何获取更频繁的进度事件
提问于 2013-09-07 01:50:19
我使用jQuery上传了一张照片，并附加了一个监听程序来处理onprogress事件。然而，即使上传的照片是几兆字节，唯一的进展事件被解雇是当它100%。我见过像dropbox和facebook这样的其他网站显示了一个更加流畅的进度栏。如何才能更频繁地更新上传进度？
样本上载代码：
var file = $photoFile.get(0).files[0];
var fileBlob = file && file.slice();
var formData = new FormData();
var title = $photoTitle.val();
formData.append('file', fileBlob);
formData.append('title', title);
$.ajax({
url: '/api/v1/photo/submit',
data: formData,
cache: false,
contentType: false,
processData: false,
type: 'POST',
xhrFields: {
onprogress: function(ev) {
console.info('upload progress', ev);
if (ev.lengthComputable) {
var percentUploaded = Math.floor(ev.loaded * 100 / ev.total);
console.info('Uploaded '+percentUploaded+'%');
// update UI to reflect percentUploaded
} else {
console.info('Uploaded '+ev.loaded+' bytes');
// update UI to reflect bytes uploaded
}
}
}
}).done(function(response) {
// do stuff
}).fail(function() {
// handle error
});回答 1
Stack Overflow用户
回答已采纳
发布于 2013-10-21 20:37:54
我能够从this堆栈溢出问题中借用代码。
我所犯的主要错误是在调用onprogress的xhrFields属性中依赖于$.ajax。相反，为了获得更频繁的进度更新，我使用XMLHttpRequest属性传递了一个自定义xhr：
$.ajax({
url: '/api/v1/photo/submit',
data: formData,
cache: false,
contentType: false,
processData: false,
type: 'POST',
xhr: function() {
var myXhr = $.ajaxSettings.xhr();
if (myXhr.upload) {
myXhr.upload.addEventListener('progress',function(ev) {
if (ev.lengthComputable) {
var percentUploaded = Math.floor(ev.loaded * 100 / ev.total);
console.info('Uploaded '+percentUploaded+'%');
// update UI to reflect percentUploaded
} else {
console.info('Uploaded '+ev.loaded+' bytes');
// update UI to reflect bytes uploaded
}
}, false);
}
return myXhr;
}
}).done(function(response) {
// do stuff
}).fail(function() {
// handle error
});警告:这利用了较新的网络技术，不适用于较旧的浏览器，特别是IE。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/18668864
复制相关文章
相似问题
腾讯云开发者
