html ajax 上传进度条,jquery 的ajax 上传进度条

一直在用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