jquery获取上传进度和取消上传操作

时间:2023-03-09 23:51:59
jquery获取上传进度和取消上传操作
var xhrOnProgress=function(fun) {
xhrOnProgress.onprogress = fun; //绑定监听
//使用闭包实现监听绑
return function() {
//通过$.ajaxSettings.xhr();获得XMLHttpRequest对象
var xhr = $.ajaxSettings.xhr();
//判断监听函数是否为函数
if (typeof xhrOnProgress.onprogress !== 'function')
return xhr;
//如果有监听函数并且xhr对象支持绑定时就把监听函数绑定上去
if (xhrOnProgress.onprogress && xhr.upload) {
xhr.upload.onprogress = xhrOnProgress.onprogress;
}
return xhr;
}
}
//文件上传 快速
function newFileUpload(_this){
var fd = new FormData();
fd.append("paragram", 12345); //上传的参数名 参数值 k-v键值对
fd.append("upfile", $("#upfile").get(0).files[0]);//上传的文件file
ajaxRe =$.ajax({
url: "${ctx}/platform/system/sysFile/fileUpload.ht",
type: "POST",
processData: false,
contentType: false,
data: fd,
success: function(data) {
$("#loading_upload").hide(20);
var fileId=JSON.parse(data).fileId;
var fileName=JSON.parse(data).fileName;
$("#fileList_upload").html($("#fileList_upload").html()+'<div style="font-size:15px;height:28px;line-height:28px"><span fileid="'+fileId+'" name="attach" file="'+fileId+','+fileName+'" res="oa" filename="'+fileName+'">'+fileName+'</span>&nbsp;&nbsp;<img onclick="AttachMent.download(this);" style="width:15px;height:15px" src="/oa/styles/common/img/enclosure/download.png">&nbsp;&nbsp;<img onclick="AttachMent.view(this);" style="width:15px;height:15px" src="/oa/styles/common/img/enclosure/preview.png">&nbsp;&nbsp;<img onclick="mailDelFile('+fileId+',this);" style="width:15px;height:15px" src="/oa/styles/common/img/enclosure/delete.png"></div>')
var obj={};
obj.id=fileId
obj.name=fileName
uploadArr.push(obj);
$("#filelist").html(JSON.stringify(uploadArr));
$("#upfile").val("")
},
xhr:xhrOnProgress(function(e){
var percent=e.loaded / e.total * 100;//计算百分比
$("#progess").html(percent.toFixed(2));
}),
beforeSend: function(){
$("#loading_upload").show(20);
},
}) }
function canceled_upload(){
ajaxRe.abort()
$("#upfile").val("")
$("#loading_upload").hide(20);
}