layui多文件一次性上传案例

废话不多直接开始

<div class=\"layui-upload\" style=\"\"><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></tr></thead><tbody id=\"demoList\"></tbody></table></div><br/><br/><button type=\"button\" class=\"layui-btn\" id=\"testListAction\">开始上传</button></div>

layui只需要把每次点击的文件放进变量里就好了，不需要layui来上传。因为他是循环多次调接口

var files;layui.use(\'upload\', function () {var $ = layui.jquery, upload = layui.upload;//多文件列表示例var demoListView = $(\'#demoList\'), uploadListIns = upload.render({elem: \'#testList\', accept: \'file\', multiple: true, auto: false, bindAction: \'#testListAction\', choose: function (obj) {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>等待上传</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);});}});});

然后files里面就是很多文件了，咱们用自定义的fromdata用ajax给他一次性送上去

$(\"#testListAction\").on(\"click\", function () {var form = new FormData();for (let i in files) {form.append(\"files\", files[i]);}form.append(\"devEstateId\", fileToken);form.append(\"tm\",new Date().getTime());var index = layer.load(0, {shade: false}); //0代表加载的风格，支持0-2$.ajax({url: httpurl + \'/estate/devUpload\',type: \"post\",dataType: \"json\",async: false,contentType: false,processData: false,data: form,success: function (result) {if (result.code == 200) {layer.msg(\"上传成功！\", {icon: 6});fileToken = null;ifclose();} else if (result.code == 500) {layer.msg(result.msg, {icon: 5});}}})});

后台直接用对应的名字接收就好了

public Object devUpload(@RequestParam(\"files\") MultipartFile[] files, String devEstateId, HttpServletRequest request) {

ok完事