多文件上传进度的实现-springmvc

最新推荐文章于 2024-01-11 23:00:00 发布

限albert

最新推荐文章于 2024-01-11 23:00:00 发布

阅读量570

点赞数

本文链接：https://blog.youkuaiyun.com/u011922760/article/details/52791010

版权

本文介绍如何使用jQuery的ajax方法实现文件上传时的进度条显示功能。通过自定义xhr对象并监听其upload属性的progress事件，可以实时更新进度条来展示文件上传的状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

$.ajax({
url: "url",
type: "POST",
data: formData,
xhr: function(){ //获取ajaxSettings中的xhr对象，为它的upload属性绑定progress事件的处理函数

myXhr = $.ajaxSettings.xhr();
if(myXhr.upload){ //检查upload属性是否存在
//绑定progress事件的回调函数
/* myXhr.upload.addEventListener('progress',progressHandlingFunction, false); */
myXhr.upload.addEventListener('progress',function(e){
if (e.lengthComputable) {
$('#showProgress'+index).attr({value : e.loaded, max : e.total}); //更新数据到进度条
var percent = (e.loaded/e.total*100);
$('#song-progress'+index).html(percent.toFixed(0) + "%");
}
},false);
}
return myXhr; //xhr对象返回给jQuery使用
},
success: function(result){
if(result==true) $("#song-file-span"+index).text("已上传");
},
contentType: false, //必须false才会自动加上正确的Content-Type
processData: false //必须false才会避开jQuery对 formdata 的默认处理
});
}