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

 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("用户取消了上传");
        }

 

posted @ 2019-07-19 16:45  盖大楼  阅读(315)  评论(0编辑  收藏  举报