首先在进行文件上传操作的时候，你得对layui 中文件上传的一些参数先了解一下，不要网上复制粘贴，起码你要对layui 文件上传的必备参数做一些大致掌握，也是自己学习。
（1）
首先你得引入layui 必备文件，
（2）在你的html 文件中引入 layui.js, layui.css样式即可，layui是一个ui框架，对一些组件的封装，拿来即可使用，
（3）
进入主题，直接上代码，
file.html
<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="fileList">选择多文件</button><div class="layui-upload-list"><table class="layui-table"><thead><tr><th>图片</th><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="fileListAction">开始上传</button></div>
file.js
这里需要注意一下，在文件上传附加的进度条的实现需要替换layui里面的upload.js文件 原有的layui 没有结合这部分功能，这里的upload.js 是别人修改好的，必须替换，不然进度条加载不出来
链接：/s/1Z8j_9aUlSBFlfFbXjHefkg
提取码：6aub
layui.use(['table','form','layer','jquery','upload','element'],function (){let table=layui.table;let form=layui.form;let layer=layui.layer;let $=layui.$;let element=layui.element;let upload=layui.upload;//上传//多文件列表示例//创建监听函数var xhrOnProgress=function(fun) {xhrOnProgress.onprogress = fun; //绑定监听//使用闭包实现监听绑return function() {//通过$.ajaxSettings.xhr();获得XMLHttpRequest对象var xhr = $.ajaxSettings.xhr();//判断监听函数是否为函数if (typeof xhrOnProgress.onprogress !== 'function')return xhr;//如果有监听函数并且xhr对象支持绑定时就把监听函数绑定上去if (xhrOnProgress.onprogress && xhr.upload) {xhr.upload.onprogress = xhrOnProgress.onprogress;}return xhr;}}var files;//多文件列表示例var demoListView = $('#demoList'), uploadListIns = upload.render({elem: '#fileList', size: 102400 //限制文件大小，单位 KB, exts: 'zip|rar|7z|doc|docx|pdf|txt|xls|ppt|xlsx|pptx|img|jpg|png|gif|bmp|jpeg' //只允许上传压缩文件, url: '/file/many/upload', type:'post', data:{}, dataType:'json', accept: 'file', multiple: true, auto : false //关闭文件自动上传, bindAction: '#fileListAction', xhr: xhrOnProgress, progress: function (value) {//上传进度回调 value进度值element.progress('demoList', value + '%')//设置页面进度条}, xhr: function (index, e) {var percent = e.loaded / e.total;//计算百分比percent = parseFloat(percent.toFixed(2));element.progress('progress_' + index + '', percent * 100 + '%');console.log("-----" + percent);}// , data: JSON.stringify(Param), choose: function (obj) {var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列//读取本地文件obj.preview(function (index, file, result) {var tr = $(['<tr id="upload-' + index + '">','<td>'+'<img src="'+ result +'" alt="'+ file.name +'" >'+'</td>', '<td>' + file.name + '</td>', '<td>' + (file.size / 1014).toFixed(1) + 'kb</td>', '<td><div class="layui-progress layui-progress-big" lay-filter="progress_'+index+'" lay-showPercent="true"><div class="layui-progress-bar" lay-percent="0%"></div></div></td>', '<td>等待上传</td>', '<td>', '<button class="layui-btn layui-btn-xs demo-reload demo-hide">重传</button>', '<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>', '</td>', '</tr>'].join(''));//单个重传tr.find('.demo-hide').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) {debugger//上传成功var tr = demoListView.find('tr#upload-' + index), tds = tr.children();tds.eq(4).html('<span style="color: #5FB878;">上传成功</span>');//tds.eq(4).html(''); //清空操作//刷新表格// table.reload('itemFileList', {//url: url//, where: {} //设定异步数据接口的额外参数////,height: 300// });return delete this.files[index]; //删除文件队列已经上传成功的文件this.error(index, upload);},error: function (index, upload) {debuggervar tr = demoListView.find('tr#upload-' + index), tds = tr.children();tds.eq(4).html('<span style="color: #FF5722;">上传失败</span>');tds.eq(5).find('.demo-reload').removeClass('demo-hide'); //显示重传}});})
后台代码
controller
@Controller@RequestMapping("/file")public class TestController {@Resourceprivate TestService testService;@GetMapping("/file1")public String getFilePage1(){return "admin/file/file1";}@GetMapping("/file2")public String getFilePage2(){return "admin/file/file2";}@RequestMapping(value = "/many/upload",method = RequestMethod.POST )@ResponseBodypublic WnDataResult manyFileUpload(HttpServletRequest request) {//得到文件的列表List<MultipartFile> files = ((MultipartHttpServletRequest) request).getFiles("file");String filePath = "D:\\ideaproject\\wnblogserver\\hystrix-server\\src\\main\\resources\\static\\admin\\images\\editor";//这里的地址文件上传到的地方for (int i = 0; i < files.size(); i++) {MultipartFile file = files.get(i);if (file.isEmpty()) {return WnDataResult.build(500,"上传第" + (i++) + "个文件失败");}String fileName=new SimpleDateFormat("yyyyMMddHHmmss").format(new Date()) + "_" +file.getOriginalFilename();File dest = new File(filePath ,fileName);try {file.transferTo(dest);testService.manyFileUpload("\\"+"admin"+"\\"+"images"+"\\"+"editor"+"\\"+fileName);} catch (IOException e) {return WnDataResult.build(500,"上传第" + (i++) + "个文件失败");}}return WnDataResult.myok();}
前端页面
数据库
