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) { } })
  • 相关阅读:
    巩固复习(对以前的随笔总结)_01
    Django 项目分析后得到的某些结论
    django 命令行命令
    实现搜索视频到播放(非原创)
    python 打包
    随笔汇总,温故知新
    找伙伴
    sam-Toy Cars
    反质数
    Blue Mary的战役地图
  • 原文地址:https://www.cnblogs.com/xtreme/p/12859071.html
Copyright © 2011-2022 走看看