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("用户取消了上传");
            }
  • 相关阅读:
    IntelliJ IDEA 常用快捷键
    IntelliJ IDEA 高效率配置
    Eclipse 设置保存代码时自动格式化
    SQL Server 事务隔离级别详解
    网络安全,互联网金融,高并发
    net user命令集合详解
    SQL不同服务器数据库之间的数据操作整理(完整版)
    sql优化
    在 Windows 上遇到非常多 TIME_WAIT 連線時應如何處理
    mvc和iis工作原理
  • 原文地址:https://www.cnblogs.com/gaidalou/p/11214208.html
Copyright © 2011-2022 走看看