zoukankan      html  css  js  c++  java
  • 文件上传进度封装

    方法:

       /**
        * 带进度监控 - 文件上传
        * @param url{string}: 上传路径
        * @param form{dom}: 表单元素
        * @param progress{function}: 进度回调
        * @param success{function}: 上传完成回调
        **/
        function uploadFileWithProgress({url,form,progress,success}) {
          if(url && form) {
            var formData = new FormData(form),
                xhr = new XMLHttpRequest();
            // 如果form元素没有消息头相关属性,需要设置xhr相关消息头
            xhr.open('post',url);
            // 上传完成
            xhr.onreadystatechange = function() {
              // readystate 为4表示请求已完成并就绪
              if(this.readyState==4 && xhr.status==200) {
                var data = JSON.parse(xhr.responseText);
                if(success) success(data);
              }
            }
            // 检测上传进度
            xhr.upload.onprogress = function(ev) {
              if(progress) progress(ev);
            }
    
            xhr.send(formData);
          }
        }

     使用,如:

       uploadFileWithProgress({
          url: 'xxx/xxx.action',
          form: document.querySelector('#form_id'),
          progress: function(ev) {
            if(ev.lengthComputable) {
          var percent = 100*ev.loaded/ev.total;
         }
         // todo }, success:
    function(data) { } })
  • 相关阅读:
    牛牛的揠苗助长(二分)
    树型DP简单入门
    Rational Ratio(一道思维题)
    Tima goes to Xentopia(条件最短路)
    中国剩余定理
    求解逆元的三种方法
    samba 基本配置及自定义控制
    vue之虚拟DOM、diff算法
    vue-cli3构建ts项目
    VMware+node+nginx+vue
  • 原文地址:https://www.cnblogs.com/xtreme/p/12859071.html
Copyright © 2011-2022 走看看