---------------------------------- 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
// file list exemplary multi-
var = new new Array the Array ();
layui.use ( 'Upload', function () {
var $ = layui.jquery
, Upload = layui.upload;
var demoListView = $ ( '# demoList')
, = upload.render uploadListIns ({
elem: '#testList'
, URL: 'File / uploads'
, Accept: 'File'
, Multiple: to true
, Auto: to false
, bindAction: '#testListAction'
, the Choose: function (obj) {
var files = this.files = obj.pushFile () ; // every time the file is appended to the file selected queue
// read the local file
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> waiting for upload </ TD>'
, '<TD>'
, '<button type = "button " class = "layui-btn layui-btn-xs demo-reload layui-hide"> Retransmission </ Button>'
, '<Button class = "layui-BTN layui-BTN-XS layui-btn-danger demo-delete "> delete </ Button> '
,' </ TD> '
,' </ TR> '] the Join. (' '));
// single retransmission
tr.find ('. reload-Demo ') ON. (' the Click ', function () {
obj.upload (index, File); return
// Ajax {}
});
// delete
tr.find (' demo-delete ') on.. ( 'the Click', function () {
delete files [index]; // delete the corresponding file
tr.remove ();
uploadListIns.config.elem.next () [0] .Value = ''; // Clear input file value, so the same file can not be selected after deleting
/ * $ .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) {// uploaded successfully
Array.push (res.xtfj);
$ ( "# xtfj") Val (the JSON.stringify (Array));.
var demoListView.find TR = ( 'Upload TR # -' + index)
, TR = TDS. Children ();
tds.eq (2) .html ( '<span style = "Color: # 5FB878;"> uploaded successfully </ span>');
//tds.eq (. 3) .html ( ''); flush operation //
// Rearranging
//$(tds).eq(3).find(".demo-delete").attr("name",res.del);
return Delete this.files [index] ; // delete a file queue have been successfully uploaded files
}
this.error (index, the Upload);
}
, error: function (index,upload){
demoListView.find TR = var ( 'Upload TR # -' + index)
, TDS = tr.children ();
tds.eq (2) .html ( '<span style = "Color: # FF5722;"> upload failed < / span> ');
tds.eq (. 3) .find ('.-Demo reload ') removeClass (.' layui-hide '); // display retransmission
}
});});
--------------------------------------------------------------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 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); // returns the object to add a
return Map;
}
----------------------------------- demo screenshots
