Springboot+bootstarp+fileinput文件上传
1:导入依赖
1> bootstrap-fileinput-master/css/fileinput.min.css
2> bootstrap-fileinput-master/css/adminlte.min.css
3> bootstrap-fileinput-master/js/fileinput.min.js
4> bootstrap-fileinput-master/js/locales/zh.js
2:前端代码
<div class="pull-left col-sm-12 col-md-6" style="width:460px;">
<div class="form-group">
<input type="file" id="uploadfile" name="file" class="file" style="width:190px;" multiple="multiple"/>
</div>
</div>
<script>
$("#uploadfile").fileinput({
language: 'zh', //设置语言
textEncoding : "UTF-8",//文本编码
uploadUrl: "fileUpload", //上传的地址
uploadExtraData: function(previewId, index) { //该插件可以向您的服务器方法发送附加数据。这可以通过uploadExtraData在键值对中设置为关联数组对象来完成。所以如果你有设置uploadExtraData={id:'kv-1'},在PHP中你可以读取这些数据$_POST['id']
var id = $('#id').val();
return {seriesId: id};
},
allowedFileExtensions: ['xls', 'xlsx', 'xlsm', 'xltx', 'xltm', 'xlsb', 'xlam'], //接收的文件后缀
uploadAsync: true, //默认异步上传
showUpload: true, //是否显示上传按钮
showRemove : true, //显示移除按钮
showPreview : false, //是否显示预览
showCaption: true,//是否显示标题
browseClass: "btn btn-primary", //按钮样式
dropZoneEnabled: false,//是否显示拖拽区域
maxFileCount: 1, //表示允许同时上传的最大文件个数
enctype: 'multipart/form-data',
validateInitialCount:false
});
//fileuploaded此事件仅针对ajax上传触发,并在每个缩略图文件上传完成后触发。此事件仅针对ajax上传并在以下情况下触发:当点击每个预览缩略图中的上传图标并且文件上传成功时,或者当你有 uploadAsync设置为true您已触发批量上传。在这种情况下,fileuploaded每一个人选择的文件被上传成功后,触发事件。
$('#uploadfile').on('fileuploaded', function(event, data, previewId, index) {}
//该方法将在上传之前触发
$('#uploadfile').on('filebatchpreupload', function(event, data) {}
// filebatchuploadcomplete此事件仅在ajax上传和完成同步或异步ajax批量上传后触发。
$('#uploadfile').on('filebatchuploadcomplete',function (event,files,extra) {}
</script>
效果:
3:后台代码
@PostMapping("fileUpload")
@ResponseBody
public void fileUpload(@RequestParam("file")MultipartFile file){
if (file.isEmpty()) {
return;
}else{
String fileName = file.getOriginalFilename();
String filepath = "D:/file/";
File localFile = new File(filepath);
if(!localFile .exists()) {
localFile.mkdirs();
}
String path = filepath+fileName;
try {
File server_file = new File(path);
file.transferTo(server_file);
} catch (Exception e) {
logger.info("文件上传异常");
}
}
return;
}
配置文件 application.properties
#文件上传配置
spring.http.multipart.enabled=true
spring.http.multipart.max-file-size=5MB
spring.http.multipart.max-request-size=200MB
注意
name一定要和Controller对应上
<input type="file" id="uploadfile" name="file" class="file" style="width:190px;" multiple="multiple"/>
public void fileUpload(@RequestParam("file")MultipartFile file){