xhr 的 onpregress 监听上传数据的 已上传 和 总大小
var fd=new FormData(); $('.mwd_uppingzheng_btna_ok').on('click',function () { // 数组转 str var strarr=JSON.stringify(arr_clip); // 给fd添加 str fd.append("file", strarr); // 创建xhr对象 var xhr = new XMLHttpRequest(); // 上传的时候 添加监听 xhr.upload.addEventListener("progress", uploadProgress, false); // 上传完毕 添加结束事件 xhr.addEventListener("load", uploadComplete, false); // 上传错误 的事件 xhr.addEventListener("error", uploadFailed, false); // 用户取消的事件 xhr.addEventListener("abort", uploadCanceled, false); // 后台接口 xhr.open("POST", "${pageContext.request.contextPath }/upload");//修改成自己的接口 xhr.send(fd); // 展示 进度弹窗 $('.mdw_uploadingfn').show(); }) // 上传中 function uploadProgress(evt) { if (evt.lengthComputable) { var percent = Math.round(evt.loaded * 100 / evt.total); $('.mdw_uploading_contgiffn').html(percent+'%'); } else { $('.mdw_uploading_contgiffn').html('无法计算'); } } // 上传结束 function uploadComplete(evt) { /* 服务器端返回响应时候触发event事件*/ $('.mdw_uploadingfn').hide(); $('.mdw_uploading_contgiffn').html(0+'%'); arr_clip=[]; // 展示缩略图 show_arr_clips(); } // 无法上传 function uploadFailed(evt) { alert("无法上传"); } // 用户取消 function uploadCanceled(evt) { alert("用户取消了上传"); }