Springboot+bootstarp+fileinput文件上传

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){