SSM框架使用Layui文件上传插件实现多文件上传（多文件列表）
pom.xml文件的配置
想要实现SSM框架实现多文件上传，必要的jar包必须要在pom.xml文件中引入。如下：
<!--commons-fileupload -->
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.3.1</version>
</dependency>
<!--commons-io -->
<dependency>
<groupId>commons-io</groupId>
<artifactId>commons-io</artifactId>
<version>2.4</version>
</dependency>
<!--文件上传-->
准备一个HTML页面
首先我们要下载Layui框架文件，放在我们的webapp目录下（就是和web-inf目录同级的地方即可）
在html目录之下，新建一个html页面
在文件头，我们分别导入上面下载下来的js和css文件，比如。
<link rel="stylesheet" href="../layui-v2.5.4/layui/css/layui.css" media="all">
<script src="../layui-v2.5.4/layui/layui.js"></script>
从官网的案例上，直接复制下来一个demo。如下。
<div class="container">
<div class="layui-upload">
<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>
<button type="button" class="layui-btn" id="testListAction">开始上传</button>
</div>
</div>
值得一提的是，layui这里并不是作为一个input来显示，我们不需要考虑加上
multiple 或者method=“POST”
这个属性，这和平常的input上传form表单提交不同。同样，我们需要将js代码给copy过来，以便我们自己修改。
<script>
layui.use('upload', function(){
var $ = layui.jquery
,upload = layui.upload;
//多文件列表示例
var demoListView = $('#demoList')
,uploadListIns = upload.render({
elem: '#testList'
,url: '/hw/uploadDocs/'
,accept: 'file'
,method:'post'
,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 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);
});
}
,done: function(res, index, upload){
if(res.code == 0){ //上传成功
var tr = demoListView.find('tr#upload-'+ index)
,tds = tr.children();
tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');
tds.eq(3).html(''); //清空操作
return delete this.files[index]; //删除文件队列已经上传成功的文件
}
this.error(index, upload);
console.log(res);//服务器响应信息
console.log(index);//当前文件的索引
console.log(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'); //显示重传
console.log(index);//当前文件的索引
console.log(upload);//重新上传的方法
}
});
});
</script>
完成后台java的Controller代码
阅读官网的文档和比照js代码，我们可以知道，当上传完毕的时候，后台方法需要传给前台json字符串，里面必须包含下图标号的三个属性。我们只需要把它放在一个map里面，再使用@ResponseBody注解将其转换为json字符串即可。
控制层方法的返回值是如何转化为json格式的字符串的呢？
通过HttpMessageConverter中的方法实现的，因为它是一个接口，因此由其实现类完成转换。如果是bean对象，会调用对象的getXXX（）方法获取属性值并且以键值对的形式进行封装，进而转化为json串。如果是map集合，采用get(key)方式获取value值，然后进行封装。
---------------------
作者：sunroyfcb 来源：CSDN 原文：https://blog.csdn.net/sunroyfcb/article/details/81048675
关于js代码，里面属性的解析去查看官方文档，我这里不再赘述。
重要的是将url等重要的信息修改为自己项目的url。比如上面js中，我的代码是这样：
//多文件列表示例
var demoListView = $('#demoList')
,uploadListIns = upload.render({
elem: '#testList'
,url: '/hw/uploadDocs/'
,accept: 'file'
,method:'post'
,multiple: true
要点：
- controller里面，必须为如下一样。注意@RequestMapping中的 value = "/uploadDocs"和produces="application/json;charset=utf-8"。
- 必须将controller里面的value和js中的url相对应，另外注意自己是否修改了上面按钮控件的ID，同样也要在js代码中做修改。
@RequestMapping(value = "/uploadDocs",produces="application/json;charset=utf-8")
@ResponseBody
public Map<String,Object> uploadDocs(MultipartFile file){
Map<String, Object> uploadData = new HashMap<String, Object>();
String uploadDocsPath = "/Users/apple/IdeaProjects/ssmcreater/src/main/webapp/documents/";
String fileName = file.getOriginalFilename();
File dir = new File(uploadDocsPath,fileName);
if(!dir.exists()){
dir.mkdirs();
}
try {
file.transferTo(dir);
uploadData.put("code", 0);
uploadData.put("msg", "上传成功");
uploadData.put("data", "");
} catch (IOException e) {
uploadData.put("code", -1);
uploadData.put("msg", "上传失败");
uploadData.put("data", "");
}
return uploadData;
}
上面注意，我把最后前台框架需要的属性都存放在了叫做uploadData的Map对象里面，最后转化为json字符串传到了前台。和ajax的用法是一模一样的。
uploadData.put("code", -1);
uploadData.put("msg", "上传失败");
uploadData.put("data", "");
有了前台和controller之后，我们就可以实现多文件上传。最后我这里的效果图如下。
在后台的指定目录下也有了相应的文件，这里就不再截图（已经删掉了...）。
有错误和遗落没有讲清楚的地方请留言，欢迎批评指教！