文件上传进度封装 - upload file with progress

方法:

   /**
    * 带进度监控 - 文件上传
    * @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) { } })

 

posted @ 2020-05-09 17:37  【云】风过无痕  阅读(444)  评论(0编辑  收藏  举报