如何在 JQuery 中获取文件上传的进度,以便我可以更新有关文件上传的状态栏。
下面是我在 JQuery 中使用 Ajax 的文件上传代码:
$('button').click(function(e) {
var formData = new FormData($('#myform')[0]);
$.ajax({
url: 'FileUploadExample',
type: 'post',
data: formData,
async: true,
cache: true,
contentType: false,
processData: false,
success: function(returndata) {
}
});
});
在谷歌搜索这个问题时,我遇到了 jquery.form.min.js 插件,它有选项 uploadProgress
。
如何在不使用 JQuery/JavaScript 中的任何插件的情况下获取上传进度。
最佳答案
像这样使用 JQuery xhr 元素
var formData = new FormData($('#myForm')[0]);
$.ajax({
url: url,
type: 'POST',
xhr: function() {
myXhr = $.ajaxSettings.xhr();
if(myXhr.upload){
myXhr.upload.addEventListener('progress',progressHandlerFunction, false);
}
return myXhr;
},
data: formData,
cache: false,
contentType: false,
processData: false
});
并且在 progressHandlerFunction 中,您可以访问 e.loaded 和 e.total of progress,例如
progressHandlerFunction(e)
{
console.log(e.total+""+e.loaded);
}
$.ajaxSettings.xhr();是真正的XMLHttpRequest元素,在原生JS中你可以在XMLHttpRequest.upload的onProgress事件上绑定(bind)一个handler,然后你就可以得到event.total和event.loaded,每次event.loaded改变值都会触发progress事件。
- event.total = HTTP 请求的总大小。
- event.loaded= 当前上传值。
你可以用这个2做任何事情,你可以通过做得到百分比
var percent=Math.round((event.loaded/event.total) * 100);
并相应地调整您的加载栏宽度。
关于javascript - 没有任何插件Jquery的Ajax文件上传进度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32109907/