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("用户取消了上传");
            }
  • 相关阅读:
    PYTHON 爬虫笔记八:利用Requests+正则表达式爬取猫眼电影top100(实战项目一)
    PYTHON 爬虫笔记七:Selenium库基础用法
    PYTHON 爬虫笔记六:PyQuery库基础用法
    java练习题(六)
    js练习题(三)
    js练习题(一)
    表格
    MAYA网络Z1J10928
    //绑定select下拉框change事件只执行一次
    枚举数组转换字符串
  • 原文地址:https://www.cnblogs.com/gaidalou/p/11214208.html
Copyright © 2011-2022 走看看