引入相关bootstrap文件链接
<link href="https://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="/authorization/css/style.css">
<link href="https://cdn.bootcss.com/bootstrap-fileinput/4.4.8/css/fileinput.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/bootstrap-fileinput/4.4.8/css/fileinput-rtl.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" media="all" rel="stylesheet" type="text/css"/>
<link href="https://cdn.bootcss.com/bootstrap-fileinput/4.4.8/themes/explorer-fa/theme.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/3.2.0/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-fileinput/4.4.8/js/plugins/sortable.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-fileinput/4.4.7/js/fileinput.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-fileinput/4.4.8/js/locales/fr.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-fileinput/4.4.8/js/locales/es.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-fileinput/4.4.8/themes/explorer-fa/theme.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-fileinput/4.4.8/themes/fa/theme.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-fileinput/4.4.8/js/locales/zh.min.js"></script>
编写前台代码
<html>
<#include "../common/header.ftl">
<body>
<div id="wrapper" class="toggled">
<#include "../common/nav.ftl">
<#--上传文件区域-->
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row clearfix">
<div class="col-md-12 column">
<form role="form" enctype="multipart/form-data" method="POST" action="/authorization/wxCard/uploadImages">
<div class="container">
<label>图片上传</label>
<div class="file-loading">
<input id="file-fr" name="file" type="file" multiple>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
<script>
$('#file-fr').fileinput({
theme: 'fa',
language: 'zh',
uploadAsync: true,//异步上传
uploadUrl: '/authorization/wxCard/uploadImages',
allowedFileExtensions: ['jpg', 'png', 'gif','mp4'],
maxFileSize:0,
maxFileCount:10
}).on("fileuploaded", function(event,data) { //异步上传成功结果处理
console.log(data.response.src);
alert("上传成功");
$("#userImage").val(data.response.src);
})
</script>
</html>
后台接收图片,并存入本地
@PostMapping("/uploadImages")
@ResponseBody
public String uploadImages(HttpServletRequest request,MultipartFile file){
try{
String filename = file.getOriginalFilename();
//上传的路径
String path = "d:\\upload";
filename = changeName(filename);
String rappendix = "upload/" + filename;
filename = path + "\\" + filename;
File file1 = new File(filename);
file.transferTo(file1);
String str = "{\"src\":\"" + rappendix + "\"}";
return str;
}catch (Exception e){
throw new AuthorizationException("上传文件失败");
}
}
效果如下:
选中两个文件