一直在用ajax,但是没有做进度条,原来$.ajax里面封装了xhr,只要从这里面取得上传进度。
这是将回调写到变数里
将xhr对像放到 $.ajax({....,xhr});$.ajax({ url:'xxxx',
...., //获取ajaxSettings中的xhr对象,为它的upload属性绑定progress事件的处理函数
xhr: function(){
myXhr = $.ajaxSettings.xhr(); //获取ajaxSettings中的xhr对象,为它的upload属性绑定progress事件的处理函数
if(myXhr.upload){ //绑定progress事件的回调函数
myXhr.upload.addEventListener('progress',progressHandlingFunction, false);
} //xhr对象返回给jQuery使用
return myXhr;
}, success:function(){}
});
绑定到'progress' 这里要自己再定义progressHandlingFunction//上传进度回调函数:function progressHandlingFunction(e) { if (e.lengthComputable) { //e.loaded 上传大小
//e.total 文件大小
var percent = e.loaded/e.total;
}
}
这是将回调写到ajax过程中
先定一个方法var jqureAjaxXhrOnProgress = function(fun) {
jqureAjaxXhrOnProgress.onprogress = fun; //绑定监听
//使用闭包实现监听绑
return function() { //通过$.ajaxSettings.xhr();获得XMLHttpRequest对象
var xhr = $.ajaxSettings.xhr(); //判断监听函数是否为函数
if (typeof jqureAjaxXhrOnProgress.onprogress !== 'function') return xhr; //如果有监听函数并且xhr对象支持绑定时就把监听函数绑定上去
if (jqureAjaxXhrOnProgress.onprogress && xhr.upload) {
xhr.upload.onprogress = jqureAjaxXhrOnProgress.onprogress;
} return xhr;
}
}
再到$.ajax({...,})$.ajax({ url:'xxxx',
...., xhr:jqureAjaxXhrOnProgress(function(e){ var percent=e.loaded / e.total;
$('#ajaxfilestext').html(percent);
}), success:function(){}
});
再根据自己的需求写进度条。
作者:吴孝青
链接:https://www.jianshu.com/p/061ce2b5ed44