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框架的结合，试验之后我们可以看到，后台已经接受到了前台上传的文件。前台也完美的显示了上传已经完成。