为了账号安全,请及时绑定邮箱和手机立即绑定
首页 手记 jquery 的ajax 上传进度条

jquery 的ajax 上传进度条

2018.07.24 21:21 971浏览

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

点击查看更多内容
0人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
手记
粉丝
83
获赞与收藏
492

关注TA,一起探索更多经验知识

同主题相似文章浏览排行榜

风间影月说签约讲师

51篇手记,涉及Java、MySQL、Redis、Spring等方向

进入讨论

Tony Bai 说签约讲师

151篇手记,涉及Go、C、Java、Python等方向

进入讨论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消