首页 > Web开发 > 详细

xhr 的 onpregress 监听上传数据的 已上传 和 总大小

时间:2019-07-19 16:58:20      阅读:89      评论:0      收藏:0      [点我收藏+]
 var fd=new FormData();
        $(.mwd_uppingzheng_btna_ok).on(click,function () {
            // 数组转 str
            var strarr=JSON.stringify(arr_clip);
            // 给fd添加 str
            fd.append("file", strarr);
            // 创建xhr对象
            var xhr = new XMLHttpRequest();
            // 上传的时候 添加监听
            xhr.upload.addEventListener("progress", uploadProgress, false);
            // 上传完毕 添加结束事件
            xhr.addEventListener("load", uploadComplete, false);
            // 上传错误 的事件
            xhr.addEventListener("error", uploadFailed, false);
            // 用户取消的事件
            xhr.addEventListener("abort", uploadCanceled, false);
            // 后台接口
            xhr.open("POST", "${pageContext.request.contextPath }/upload");//修改成自己的接口
            xhr.send(fd);
            // 展示 进度弹窗
            $(.mdw_uploadingfn).show();
        })
        // 上传中
        function uploadProgress(evt) {
            if (evt.lengthComputable) {
                var percent = Math.round(evt.loaded * 100 / evt.total);
                $(.mdw_uploading_contgiffn).html(percent+%);
            }
            else {
                $(.mdw_uploading_contgiffn).html(无法计算);
            }
        }
        // 上传结束
        function uploadComplete(evt) {
            /* 服务器端返回响应时候触发event事件*/
            $(.mdw_uploadingfn).hide();
            $(.mdw_uploading_contgiffn).html(0+%);
            arr_clip=[];
            // 展示缩略图
            show_arr_clips();
        }
        // 无法上传
        function uploadFailed(evt) {
            alert("无法上传");
        }
        // 用户取消
        function uploadCanceled(evt) {
            alert("用户取消了上传");
        }

 

xhr 的 onpregress 监听上传数据的 已上传 和 总大小

原文:https://www.cnblogs.com/gaidalou/p/11214208.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!