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