初始化文件列表
初始化文件列表
选择需要上传的文件列表
选择需要上传的文件列表
上传之后清空或者预览
上传之后清空或者预览
在线预览上传的文件
在线预览上传的office文件
代码源码：
| <html lang="zh"> | |
| <head><meta charset="UTF-8"><title>上传文件综合实例</title><meta name="renderer" content="webkit"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"><link rel="stylesheet" href="/resource/admin/layui/css/layui.css" media="all"> | |
| </head> | |
| <body> | |
| <div class="layui-container"><fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;"><legend>文件列表</legend></fieldset> | |
| <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> | |
| </div> | |
| <script src="/resource/layui/src/layui.js"></script> | |
| <script> | |
| layui.use(['form', 'layer', 'upload', 'element'], function () { | |
| let $ = layui.jquery | |
| , layer = layui.layer | |
| , upload = layui.upload | |
| , element = layui.element; | |
| //多文件列表示例let demoListView = $('#demoList') | |
| , uploadListIns = upload.render({ | |
| elem: '#testList' | |
| , url: 'api/upload.php' | |
| , accept: 'file' | |
| , multiple: true | |
| , auto: false | |
| , bindAction: '#testListAction' | |
| , progress: function (n) { | |
| layer.render(); | |
| console.log("进度：" + n); | |
| let percent = n + '%'; //获取进度百分比 | |
| element.progress('progressDemo', percent); //可配合 layui 进度条元素使用 | |
| } | |
| , 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><div class="layui-progress layui-progress-big" lay-filter="progressDemo" lay-showPercent="true">\n' + | |
| ' <div class="layui-progress-bar" lay-percent="0%"></div>\n' + | |
| '</div></td>' | |
| , '<td>等待上传</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(); | |
| uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选 | |
| }); | |
| demoListView.append(tr); | |
| }); | |
| } | |
| , done: function (res, index, upload) { | |
| let href; | |
| layer.alert(res.msg, | |
| { | |
| btn: ["清空列表", "取消"], | |
| yes: function () { | |
| $("#demoList").html(""); | |
| layer.closeAll(); | |
| } | |
| }); | |
| console.log(res); | |
| if (res.code == 0) { //上传成功let tr = demoListView.find('tr#upload-' + index) | |
| , tds = tr.children(); | |
| if (res.data.fileType == "xlsx") { | |
| href = "选定的在线预览api" | |
| + res.data.fileInfo.replace("../", ""); | |
| } | |
| element.progress('demo', '100%'); | |
| tds.eq(3).html('<span style="color: #5FB878;">上传成功</span>'); | |
| tds.eq(4).html('<button type="button" class="layui-btn" id="showAction">预览</button>'); //清空操作 | |
| $("#showAction").click(function () { | |
| layer.open({ | |
| type: 2, | |
| content: href, | |
| title: "在线预览", | |
| maxmin: true, | |
| }); | |
| }); | |
| return delete this.files[index]; //删除文件队列已经上传成功的文件 | |
| } | |
| this.error(index, upload); | |
| } | |
| , error: function (index, upload) { | |
| let tr = demoListView.find('tr#upload-' + index) | |
| , tds = tr.children(); | |
| element.progress('demo', '0%'); | |
| tds.eq(3).html('<span style="color: #FF5722;">上传失败</span>'); | |
| tds.eq(4).find('.demo-reload').removeClass('layui-hide'); //显示重传 | |
| } | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |