zoukankan      html  css  js  c++  java
  • 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("用户取消了上传");
            }
  • 相关阅读:
    多一盎司定律
    工作职场中,需要养成并实践的思维模型
    中国易经大师排名,易学十大泰斗人物
    大易人生 --- 曾老
    中道管理 --- 曾老
    大数据分析的道与术
    人应该服从自己的规划
    练习不是让你一次就把事情做好,而是帮助你做的越来越好
    让理想转个弯
    在酒桌上就能搞定生意
  • 原文地址:https://www.cnblogs.com/gaidalou/p/11214208.html
Copyright © 2011-2022 走看看