js如何获取文件上传进度?
js监听:
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; } }
ajax文件上传函数:
function Submit(){ var fileObj = document.getElementById("FileUpload").files[0]; // js 获取文件对象 var formFile = new FormData(); formFile.append("file", fileObj); //加入文件对象 var data = formFile; $.ajax({ url: url, data: data, type: "Post", dataType: "json", cache: false,//上传文件无需缓存 processData: false,//用于对data参数进行序列化处理 这里必须false contentType: false, //必须 xhr:xhrOnProgress(function(e){ var percent=e.loaded/e.total;//文件上传百分比 console.log(percent); }), success: function (result) { console.log(result); }, }) }
核心代码:
xhr:xhrOnProgress(function(e){ var percent=e.loaded/e.total;//文件上传百分比 console.log(percent); }),