【layui】多文件上传组件实现

插件预览效果：

需要引入layui的脚本文件layui.js和样式文件layui.css
html代码：

1. <div class="layui-input-block">
2.    
3.     <div class="layui-upload-list">
4.         <table class="layui-table">
5.             <colgroup>
6.                 <col style="min-width: 100px;">
7.                 <col width="150">
8.                 <col width="260">
9.                 <col width="150">
10.             </colgroup>
11.             <thead>
12.                 <tr>
13.                     <th>文件名</th>
14.                     <th>大小</th>
15.                     <th>上传进度</th>
16.                     <th>操作</th>
17.                 </tr>
18.             </thead>
19.             <tbody id="ID-upload-demo-files-list"></tbody>
20.         </table>
21.     </div>
22.     <button type="button" class="layui-btn layui-btn-normal" id="upload">选择多文件</button>
23.     <button type="button" class="layui-btn" id="ID-upload-demo-files-action">开始上传</button>
24. </div>

复制代码

脚本代码：

1. //初始化组件
2. var uploadListIns = upload.render({
3.     elem: '#upload',
4.     elemList: $('#ID-upload-demo-files-list'), // 列表元素对象
5.     url: '/FileManage/Uploadfile/Upload', // 实际使用时改成您自己的上传接口即可。
6.     accept: 'file',
7.     multiple: true,
8.     number: 10,
9.     auto: false,
10.     bindAction: '#ID-upload-demo-files-action',
11.     data: { filetype: 3 },//接口参数
12.     choose: function (obj) {
13.         var that = this;
14.         var files = this.files = obj.pushFile(); // 将每次选择的文件追加到文件队列
15.         console.log('obj.pushFile()', obj.pushFile())
16.         // 读取本地文件
17.         obj.preview(function (index, file, result) {
18.             var tr = $(['<tr id="upload-' + index + '">',
19.             '<td>' + file.name + '</td>',
20.             '<td>' + (file.size / 1024).toFixed(1) + 'kb</td>',
21.             '<td class="progressContent"><div class="layui-progress" lay-filter="progress-demo-' + index + '"><div class="layui-progress-bar" lay-percent=""></div></div></td>',
22.                 '<td class="operate">',
23.                 // '<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>',
24.                 '<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>',
25.                 '</td>',
26.                 '</tr>'].join(''));
29.             // 单个重传
30.             $("body").delegate('#upload-' + index + " .demo-reload", "click", function () {
31.                 var progress = '<div class="layui-progress" lay-filter="progress-demo-' + index + '"><div class="layui-progress-bar" lay-percent=""></div></div>'
33.                 element.progress('progress-demo-' + index, '0%');
35.                 obj.upload(index, file);
36.             });
37.             // 删除
38.             $("body").delegate(".demo-delete", "click", function () {
39.                 delete files[index]; // 删除对应的文件
40.                 tr.remove(); // 删除表格行
41.                 // 清空 input file 值，以免删除后出现同名文件不可选
42.                 uploadListIns.config.elem.next()[0].value = '';
43.             });
45.             that.elemList.append(tr);
47.             element.render('progress'); // 渲染新加的进度条组件
48.         });
49.     },
50.     done: function (res, index, upload) { // 成功的回调
51.         var that = this;
52.         if (res.code == 0) { // 上传成功
53.             console.log('done-success', res, index, upload)
55.             var tr = that.elemList.find('tr#upload-' + index)
56.             var tds = tr.children();
57.             tds.eq(3).html(''); // 清空操作
58.             var td = $([
59.                 '<button class="layui-btn layui-btn-xs table-preview " onclick="showAnnex(\'' + res.data[0].src + '\')">下载</button>',
60.                 '<button class="layui-btn layui-btn-xs layui-btn-danger table-delete">删除</button>'].join(''));
62.             $("#upload-" + index).find(".operate").empty();
63.             // console.log('$("#" + index).find(".operate")', $("#" + index).find(".operate"))
64.             $("#upload-" + index).find(".operate").append(td);
65.             $("#upload-" + index).attr("data-src", res.data[0].src)
66.             fileList.push({
67.                 src: res.data[0].src,
68.                 name: this.files[index].name,
69.                 size: res.data[0].size,
70.             })
71.             console.log('fileList', fileList)
72.             delete this.files[index]; // 删除文件队列已经上传成功的文件
73.             return;
74.         }
75.         else {
76.             console.log('done', res, index, upload)
77.             var td = $([
78.                 '<button class="layui-btn layui-btn-xs demo-reload ">重传</button>',
79.                 '<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>'].join(''));
81.             $("#upload-" + index).find(".operate").empty();
82.             // console.log('$("#" + index).find(".operate")', $("#" + index).find(".operate"))
83.             $("#upload-" + index).find(".operate").append(td);
84.             this.error(index, upload);
85.         }
87.     },
88.     allDone: function (obj) { // 多文件上传完毕后的状态回调
89.         console.log(obj)
90.     },
91.     error: function (index, upload) { // 错误回调
92.         var that = this;
93.         var tr = that.elemList.find('tr#upload-' + index);
94.         var tds = tr.children();
95.         // 显示重传
96.         tds.eq(3).find('.demo-reload').removeClass('layui-hide');
97.     },
98.     progress: function (n, elem, e, index) { // 注意：index 参数为 layui 2.6.6 新增
99.         element.progress('progress-demo-' + index, n + '%'); // 执行进度条。n 即为返回的进度百分比
100.     }
101. });
102. //删除按钮事件
103. $("body").delegate(".table-delete", "click", function () {
104.     let src = $(this).parents('tr').attr("data-src")
105.     console.log('delete', src)
106.     let deleteIndex = -1;
107.     fileList.forEach(function (item, index) {
108.         if (item.src == src) {
109.             deleteIndex = index
110.         }
111.     })
112.     if (deleteIndex != -1) {
113.         fileList.splice(deleteIndex, 1)
114.     }
115.     $(this).parents('tr').remove();
116. });
117. //开始上传按钮事件
118. $("body").delegate("#ID-upload-demo-files-action", "click", function () {
119.     $("#ID-upload-demo-files-list tr").each(function (index, item) {
120.         if ($(item).attr("data-src") == undefined || $(item).attr("data-src") == 'undefined') {
121.             $(item).find(".operate").empty();
122.         }
123.         // console.log(' $(item).attr("src")', $(item).attr("data-src"))
124.     });
125. })

复制代码

 


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。