本文介绍了一个使用jQuery实现的文件上传功能，其中包括如何监听文件上传进度并实时展示上传状态。通过自定义Ajax设置，能够有效地获取文件上传过程中的进度信息。
function uploadFile(){
$(".file").change(function(){
var formData2 = $(this).parent(); //得到表单
$.ajax({
url: 'xxx&r=' + Math.random(),
type: 'POST',
Accept:'text/html;charset=UTF-8',
cache: false,
contentType:"multipart/form-data",
data: new FormData(formData2[0]),
processData: false,
contentType: false,
xhr:function(){
myXhr = $.ajaxSettings.xhr();
if(myXhr.upload){ // check if upload property exists
myXhr.upload.addEventListener('progress',function(e){
var loaded = e.loaded;//已经上传大小情况
var tot = e.total;//附件总大小
var per = Math.floor(100*loaded/tot); //已经上传的百分比
$("#son").html( per +"%" );
$("#son").css("width" , per +"%");
console.log('附件总大小 = ' + loaded);
console.log('已经上传大小 = ' + tot);
}, false); // for handling the progress of the upload
}
return myXhr;
},success:function(data){
console.log(data);
console.log("上传成功!!!!");
},error:function(){
console.log("上传失败！");
}
});
});
}
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
