jquery獲取上傳進度和取消上傳操作
阿新 • • 發佈:2018-08-08
for orm name bsp tty type clas val 計算
var xhrOnProgress=function(fun) { xhrOnProgress.onprogress = fun; //綁定監聽 //使用閉包實現監聽綁 return function() { //通過$.ajaxSettings.xhr();獲得XMLHttpRequest對象 var xhr = $.ajaxSettings.xhr(); //判斷監聽函數是否為函數 if (typeofxhrOnProgress.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> <img onclick="AttachMent.download(this);" style="width:15px;height:15px" src="/oa/styles/common/img/enclosure/download.png"> <img onclick="AttachMent.view(this);" style="width:15px;height:15px" src="/oa/styles/common/img/enclosure/preview.png"> <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); }
jquery獲取上傳進度和取消上傳操作