---------------------------------- 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截图
