web 文件上传（可多个） 包含进度条

项目最近用到的功能，整理记录下，方便下次使用，有需要的也可查看参考。

满足需求：1.可多个文件上传；2.满足上传显示进度条（多个文件时，根据全部文件的大小计算）；

下面代码是大致的整理，具体需要根据自己提取。

环境：angular 框架

TS:

<div class="form-horizontal">
    <div class="form-group">
      <label class="col-md-1 control-label">
        导入备份文件：
      </label>
      <div class="col-md-8">
        <div class="input-group">
          <input type="text" class="form-control" id="sysWHSpace_filename" [style.display]="nameData.length === 0 ? '' :'none'">
          <table [style.display]=" nameData.length > 0 ? '' :'none'" class="table table-bordered">
            <tr><th>文件名</th></tr>
            <tr *ngFor="let item of nameData;let ind = index;">
              <td>{{item}}</td>
            </tr>
          </table>
          <span class="input-group-btn">
            <button class="btn gray" type="button" style="margin-left:20px;width:100px;" (click)="clickPRE()">浏览</button>
            <input type="file" id="file" name="file" style="display: none;" multiple required  (change)="changeFile()"/>
            <button class="btn gray" type="button" style="margin-left:20px;width:100px;" (click)="doImport()">导入</button>
        </span>
        </div>
      </div>
    </div>
    <div class="form-group">
      <div class="progress progress-striped active" style="margin-left: 20px;margin-right: 100px;">
        <div class="progress-bar progress-bar-success" id="result_out" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
          <span class="sr-only" style="position: relative;"></span>
        </div>
      </div>
    </div>
</div>

下面是jquery 代码：

export class SystemConfigurationBackup implements OnInit {
    userID:any;
    totalSize:any;//文件总大小
    sizeData;any;//每个文件大小的数组
    nameData:any;//文件列表
    isChange:any;

    constructor(private publicCom:PublicComponent) {}
    ngOnInit() {
      this.userID = this.publicCom.authority.userID;
      this.sizeData = [];
      this.nameData = [];
      this.isChange = false;
    }
    //配置导出
    export():void{
    const data = {
      userID: this.userID,
      url:"/cfgBackup/export",
      reqType: 'GET'
    };
    this.publicCom.showLoading();
    this.publicCom.DataPost({"data": data}).subscribe(resp=>{
      this.publicCom.hideLoading();
      if(resp.length === 0){
        return;
      }
      const result = resp[0].result;
      if(result === 'SUCCESS') {
        $("#down").href = resp[0].data[0].path;
        $("#down")[0].click();
      }else if(result === 'FAIL'){
        alert(resp[0].data[0].reason);
      }
    });
  }
   //选择文件 change  在文本框中显示选中的文件名称
    changeFile():void{
      //获取选中的文件列表
      const fileList = $('#file')[0].files;
      const data = [];
      for(let i=0;i<fileList.length;i++) {
        data.push(fileList[i].name);
      }
      //文本中显示 选中文件的名称
      $('#sysWHSpace_filename').val(data.join(','));
    }
    clickPRE():void {
      $('#file').click();
  }
    //导入文件的方法
    doImport():any {
      const that = this;
      const fileList = $('#file')[0].files;//文件的列表
      //为了判断是否全部上传完   默认文件状态是0，下载成功 修改状态为1
      const resultData =[];//记录 下载结束的个数
      for(let j=0;j<fileList.length;j++) {
        resultData.push(0);
      }

     //文件的验证  判读文件后缀
      let flag = false;
      for(let i=0;i<fileList.length;i++) {
        if(fileList[i].name.substring(fileList[i].name.length-6,fileList[i].name.length) !== "tar.gz"){
          flag = true;
          break;
        }
      }
      if(flag){//验证不通过
        alert("文件格式不规范");
        return;
      }
    //循环上传文件
    for(let i=0;i<fileList.length;i++) {
      const file_data = new FormData();
      if (i === 0) {
        file_data.append("file",fileList[i]);
      } else {
        file_data.set("file",fileList[i]);
      }
      const URL = 'http://'+window.location.host+"/import";//接口
      $.ajax({
        url: URL,
        type: "POST",
        data: file_data,
        processData: false,
        contentType: false,
        cache: false,
        async:true, //同步请求将锁住浏览器，用户其他操作必须等待请求完成才可以执行。
        // xhr: function() {
        //   const myXhr = $.ajaxSettings.xhr();
        //   if(myXhr.upload){
        //     myXhr.upload.addEventListener('progress',that.updateProgress, false); // for handling the progress of the upload
        //   }
        //   return myXhr;
        // },
      }).done(function(data) {
        resultData[i] = 1;
        //判断是否全部传输完
        let finish = true;//记录是否下载完成
        let totalFinish = 0;
        for (let k = 0; k < fileList.length; k++) {//针对多个文件下载
          if (resultData[k] === 0) {
            finish = false;
          } else {
            totalFinish += 1;
          }
        }
        const width = totalFinish / fileList.length * 100;
        $('#result_out')[0].style.width = width + '%';
        $('#result_out').find("span").text(width + '%');
        if (finish) {
         alert("上传成功");
        }
      });
    }
    return false;
  }
  updateProgress(evt):void {
    if (evt.lengthComputable) {
      //根据自己需求实现
    }
  }

  

}

喜欢点赞