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之後，我們就可以實現多文件上傳。最後我這裏的效果圖如下。
在後臺的指定目錄下也有了相應的文件，這裏就不再截圖（已經刪掉了...）。
有錯誤和遺落沒有講清楚的地方請留言，歡迎批評指教！