![](/img/trans.png)
[英]jQuery Form Plugin: enctype:multipart/form-data and file-upload - no JSON returning?
[英]Ajax File-upload progress without any plugin Jquery
如何在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,例如
progressHandlerFunction(e)
{
console.log(e.total+""+e.loaded);
}
$ .ajaxSettings.xhr(); 是真正的XMLHttpRequest元素,在本机JS中,您可以在XMLHttpRequest.upload onProgress事件上绑定处理程序,然后可以获取event.total和event.loaded,每次event.loaded更改值时都会触发progress事件。
您可以使用此2做任何事情,您可以通过执行var percent=Math.round((event.loaded/event.total) * 100);
获得百分比var percent=Math.round((event.loaded/event.total) * 100);
并相应地调整您的加载栏宽度。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.