SSM框架 基於Bootstrap fileinput 實現文件上傳功能
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頁面
需要準備css和js文件，這個不用多說吧。據說這些引入的順序很重要，我照着官方給的example一個個輸進去。照着我的例子自己修改即可。缺少什麼插件就自己去下載，這裏不再贅述。
<link href="../../../css/bootstrap4.0/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="../../../css/bootstrap4.0/css/bootstrap.min.css" crossorigin="anonymous">
<link href="../../../bootstrap-fileinput-master/css/fileinput.css" media="all" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" crossorigin="anonymous">
<link href="../../../bootstrap-fileinput-master/themes/explorer-fas/theme.css" media="all" rel="stylesheet" type="text/css"/>
<script src="../../../js/jquery/jquery-3.4.1.min.js" ></script>
<script src="../../../js/boostrap4.0/js/bootstrap.js"></script>
<script src="../../../js/assets/js/vendor/popper.min.js"></script>
<script src="../../../js/assets/js/vendor/holder.min.js"></script>
<script src="../../../js/boostrap4.0/js/bootstrap.bundle.js" crossorigin="anonymous"></script>
<script src="../../../bootstrap-fileinput-master/js/plugins/piexif.js" type="text/javascript"></script>
<script src="../../../bootstrap-fileinput-master/js/plugins/sortable.js" type="text/javascript"></script>
<script src="../../../bootstrap-fileinput-master/js/fileinput.js" type="text/javascript"></script>
<script src="../../../bootstrap-fileinput-master/js/locales/zh.js" type="text/javascript"></script>
<script src="../../../bootstrap-fileinput-master/themes/fas/theme.js" type="text/javascript"></script>
<script src="../../../bootstrap-fileinput-master/themes/explorer-fas/theme.js" type="text/javascript"></script>
我們需要給這個上傳控件準備一個div和input標籤，如下。
<div class="file-loading">
<input id="uploadDocs" name="file" type="file" multiple>
</div>
再加上js代碼，我們可以在這裏配置我們的控件和上傳的url等屬性。
<script>
$("#uploadDocs").fileinput({
language:'zh',//中文，如果js文件沒有引入zh.js，這個是不起作用的
theme: "explorer-fas",//主題樣式，就這個比較不錯，支持響應式。
uploadUrl: '/hw/uploadDocs',//後臺方法的url
maxFileSize:0,//單位爲kb，如果爲0表示不限制文件大小
allowedFileExtensions: ['doc', 'docx'],//允許接收的文件後綴
browseClass:"btn btn-primary", //按鈕樣式
maxFileCount:250, //表示允許同時上傳的最大文件個數
msgFilesTooMany: "選擇上傳的文件數量({n}) 超過允許的最大數值{m}！",
preferIconicPreview: true,
previewFileIconSettings: {//預覽文件的圖標
'doc': '<i class="fas fa-file-word text-primary"></i>',
'docx': '<i class="fas fa-file-word text-secondary"></i>',
'pdf': '<i class="fas fa-file-word text-danger"></i>',
'txt': '<i class="fas fa-file-word text-dark"></i>',
},
});
// 上傳成功回調
$("#uploadDocs").on("filebatchuploadcomplete", function() {
});
// 上傳失敗回調
$('#uploadDocs').on('fileerror', function(event, data, msg) {
});
</script>
上面我沒有寫太詳細，比如成功時候的回調函數和失敗的回調函數。
Java後臺的寫法。
Bootstrap fileinput對於後臺方法的返回值要求不那麼嚴格，只要求返回的內容中，如果上傳成功，不要返回有內容的“error”屬性即可，那麼我們就使用@ResponseBody這個註解，來返回一個map即可，後期我們可以在js文件中，對這個返回的json字符串進行一些動作。這裏我就不再詳細的去寫。
@RequestMapping(value = "/uploadDocs",produces="application/json;charset=utf-8")
@ResponseBody
public Map<String,Object> uploadDocs(@RequestParam("file") 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", "");
uploadData.put("error", "上傳失敗，請檢查網絡連接或聯繫管理員");
}
return uploadData;
}
如上。我們就完成了對Bootstrap fileinput與ssm框架的結合，試驗之後我們可以看到，後臺已經接受到了前臺上傳的文件。前臺也完美的顯示了上傳已經完成。