layui多文件上传

100

101

102

103

104

105

106

107

108

109

110

111

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Demo</title>
  <!-- 请勿在项目正式环境中引用该 layui.css 地址 -->
  <link href="//unpkg.com/layui@2.9.20/dist/css/layui.css" rel="stylesheet">
</head>
<body>
<div class="layui-upload">
  <button type="button" class="layui-btn layui-btn-normal" id="ID-upload-demo-files">选择多文件</button> 
  <div class="layui-upload-list">
    <table class="layui-table">
      <colgroup>
        <col style="min-width: 100px;">
        <col width="150">
        <col width="260">
        <col width="150">
      </colgroup>
      <thead>
        <th>文件名</th>
        <th>大小</th>
        <th>上传进度</th>
        <th>操作</th>
      </thead>
      <tbody id="ID-upload-demo-files-list"></tbody>
    </table>
  </div>
  <button type="button" class="layui-btn" id="ID-upload-demo-files-action">开始上传</button>
</div>
   
<!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
<script src="//unpkg.com/layui@2.9.20/dist/layui.js"></script>
<script>
layui.use(function(){
  var upload = layui.upload;
  var element = layui.element;
  var $ = layui.$;
  // 制作多文件上传表格
  var uploadListIns = upload.render({
    elem: '#ID-upload-demo-files',
    elemList: $('#ID-upload-demo-files-list'), // 列表元素对象
    url: '', // 实际使用时改成您自己的上传接口即可。
    accept: 'file',
    multiple: true,
    number: 3,
    auto: false,
    bindAction: '#ID-upload-demo-files-action',
    choose: function(obj){   
      var that = this;
      var files = this.files = obj.pushFile(); // 将每次选择的文件追加到文件队列
      // 读取本地文件
      obj.preview(function(index, file, result){
        var tr = $(['<tr id="upload-'+ index +'">',
          '<td>'+ file.name +'</td>',
          '<td>'+ (file.size/1024).toFixed(1) +'kb</td>',
          '<td><div class="layui-progress" lay-filter="progress-demo-'+ index +'"><div class="layui-progress-bar" lay-percent=""></div></div></td>',
          '<td>',
            '<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>',
            '<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>',
          '</td>',
        '</tr>'].join(''));
         
        // 单个重传
        tr.find('.demo-reload').on('click', function(){
          obj.upload(index, file);
        });
         
        // 删除
        tr.find('.demo-delete').on('click', function(){
          delete files[index]; // 删除对应的文件
          tr.remove(); // 删除表格行
          // 清空 input file 值，以免删除后出现同名文件不可选
          uploadListIns.config.elem.next()[0].value = ''; 
        });
         
        that.elemList.append(tr);
        element.render('progress'); // 渲染新加的进度条组件
      });
    },
    done: function(res, index, upload){ // 成功的回调
      var that = this;
      // if(res.code == 0){ // 上传成功
        var tr = that.elemList.find('tr#upload-'+ index)
        var tds = tr.children();
        tds.eq(3).html(''); // 清空操作
        delete this.files[index]; // 删除文件队列已经上传成功的文件
        return;
      //}
      this.error(index, upload);
    },
    allDone: function(obj){ // 多文件上传完毕后的状态回调
      console.log(obj)
    },
    error: function(index, upload){ // 错误回调
      var that = this;
      var tr = that.elemList.find('tr#upload-'+ index);
      var tds = tr.children();
       // 显示重传
      tds.eq(3).find('.demo-reload').removeClass('layui-hide');
    },
    progress: function(n, elem, e, index){ // 注意：index 参数为 layui 2.6.6 新增
      element.progress('progress-demo-'+ index, n + '%'); // 执行进度条。n 即为返回的进度百分比
    }
  });
});
</script>
 
</body>
</html>