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(){}
});

再根据自己的需求写进度条。