layui 批量文件上传

Posted 2022-05-31 java-llp

----------------------------------  html -----------------------------------------------------------------

<label class="layui-form-label">附件</label>
<div class="layui-upload">
<button type="button" class="layui-btn layui-btn-normal" style="margin-left: 0%;" id="testList">选择多文件</button>
<div class="layui-upload-list">
<table class="layui-table" style="width: 86.5%;margin-left: 10%;">
<thead>
<tr><th style="width: 300px;">文件名</th>
<th style="width: 300px;">大小</th>
<th style="width: 300px;">状态</th>
<th style="width: 300px;">操作</th>
</tr></thead>
<tbody id="demoList"></tbody>
</table>
</div>
<button type="button" style="margin-left: 10%;" class="layui-btn" id="testListAction">开始上传</button>
</div>

 

---------------------------------------js

//多文件列表示例
var array=new Array();

layui.use(‘upload‘, function()
var $ = layui.jquery
,upload = layui.upload;
var demoListView = $(‘#demoList‘)
,uploadListIns = upload.render(
elem: ‘#testList‘
,url: ‘file/uploads‘
,accept: ‘file‘
,multiple: true
,auto: false
,bindAction: ‘#testListAction‘
,choose: function(obj)
var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
//读取本地文件
obj.preview(function(index, file, result)
var tr = $([‘<tr id="upload-‘+ index +‘">‘
,‘<td>‘+ file.name +‘</td>‘
,‘<td>‘+ (file.size/1014).toFixed(1) +‘kb</td>‘
,‘<td>等待上传</td>‘
,‘<td>‘
,‘<button type="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);return
//ajax
);

//删除
tr.find(‘.demo-delete‘).on(‘click‘, function()
delete files[index]; //删除对应的文件
tr.remove();
uploadListIns.config.elem.next()[0].value = ‘‘; //清空 input file 值，以免删除后出现同名文件不可选
/* $.ajax(
url:"xtfj/doDelete",
data:bh:$(this).attr("name"),
dataType:"json",
type:"post",
success:function(data)


) */
);

demoListView.append(tr);
);

,done: function(res, index, upload)
if(res.code == 0) //上传成功
array.push(res.xtfj);
$("#xtfj").val(JSON.stringify(array));
var tr = demoListView.find(‘tr#upload-‘+ index)
,tds = tr.children();
tds.eq(2).html(‘<span style="color: #5FB878;">上传成功</span>‘);
//tds.eq(3).html(‘‘); //清空操作
//重构下
//$(tds).eq(3).find(".demo-delete").attr("name",res.del);
return delete this.files[index]; //删除文件队列已经上传成功的文件

this.error(index, upload);

,error: function(index, upload)
var tr = demoListView.find(‘tr#upload-‘+ index)
,tds = tr.children();
tds.eq(2).html(‘<span style="color: #FF5722;">上传失败</span>‘);
tds.eq(3).find(‘.demo-reload‘).removeClass(‘layui-hide‘); //显示重传

); );

 

 

--------------------------------------------------------------controller

@RequestMapping(value="/uploads")
@ResponseBody
public Map<String,Object> uploads(
Map<String,Object> map,
@RequestParam(value="file",required=false)MultipartFile file,
@RequestParam(value = "file", required = false) CommonsMultipartFile files[],HttpSession session,
HttpServletRequest request)
map=new HashMap<String,Object>();
UserVO cu = (UserVO) session.getAttribute("CurrentUser");
MultipartHttpServletRequest req=(MultipartHttpServletRequest)request;
Map<String, MultipartFile> fileMap = req.getFileMap();
Xtfj xtfj = new Xtfj();
for (Map.Entry<String, MultipartFile> ele :fileMap.entrySet())
MultipartFile partFile = ele.getValue();

String uuidVal = UUID.randomUUID().toString()
+ partFile.getOriginalFilename().substring(
partFile.getOriginalFilename()
.lastIndexOf("."));

xtfj.setFjmc(uuidVal);// e9716d4b-6a81-4a74-9c7f-ebdafafdccf4.png
xtfj.setFjsm(partFile.getOriginalFilename());// OA数据库设计201905151800.png
xtfj.setFjlj(sdf.format(new Date()) + File.separator
+ uuidVal);// 2019-07-24\\\\e9716d4b-6a81-4a74-9c7f-ebdafafdccf4.png
xtfj.setFjlx(partFile.getContentType());// image/png
xtfj.setCjsj(new Date());
xtfj.setCjr(cu.getBh());
xtfj.setFjlx(partFile.getContentType());
xtfj.setFjzt("1");
String curl = "D:\\\\oa\\\\upload\\\\file\\\\"
+ sdf.format(new Date());
File cfile = new File(curl, uuidVal);
if (!cfile.exists())
cfile.mkdirs();

//xtfjService.saveXtfj(xtfj);

map.put("code", 0);
//map.put("del", xtfj.getBh());
map.put("xtfj", xtfj); //返回对象一块添加
return map;

-----------------------------------demo截图