前端代码
<@html title="上传文件" import="layui,sign">
<div class="layui-upload">
<button type="button" class="layui-btn layui-btn-normal"
id="testList">选择文件
</button>
<div class="layui-upload-list">
<table class="layui-table">
<thead>
<tr>
<th>文件名</th>
<th>大小</th>
<th>状态</th>
<th>路径</th>
<th>操作</th>
</tr>
</thead>
<tbody id="demoList"></tbody>
</table>
</div>
<button type="button" class="layui-btn" id="testListAction">开始上传</button>
</div>
<script>
let files=[];
layui.use('upload', function(){
let $ = layui.jquery
,upload = layui.upload;
//多文件列表示例
let demoListView = $('#demoList')
,uploadListIns = upload.render({
elem: '#testList',
url: '${base}/demo/uploadXmlFiles',
// 限制文件大小,单位 KB
// size: 60,
accept: 'file',
//只允许上传文本文件
exts: 'xml',
// 可放扩展数据 key-value
// data:{'ID':277},
multiple: true,
auto: false,
bindAction: '#testListAction',
choose: function(obj){
let files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
//读取本地文件
obj.preview(function(index, file, result){
let tr = $(['<tr id="upload-'+ index +'">'
,'<td>'+ file.name +'</td>'
,'<td>'+ (file.size/1014).toFixed(1) +'kb</td>'
,'<td>等待上传</td>'
,'<td></td>'
,'<td>'
,'<button class="layui-btn layui-btn-mini demo-reload layui-hide">重传</button>'
,'<button class="layui-btn layui-btn-mini 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();
uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值,以免删除后出现同名文件不可选
});
demoListView.append(tr);
});
},
done: function(res, index, upload

最低0.47元/天 解锁文章
2728





