bootstarp fileinput 文件上传实现方式（java SSM框架实现）

项目需要实现主图上传，之前在公司看人使用过bootstarp fileinput 这个基于bootstarp的文件上传插件，对于一个后端开发的我，前端一直以来都是使用bootstarp，所以要实现文件上传，选择此插件最好不过，接下就是记录我的实现过程，使用的后端技术是SSM，前端页面框架bootstarp，数据绑定框架avalon.js，不知道我这技术选型算不算简单的前后端分离了？有问题或不合理的地方麻烦大佬指出，谢谢

1、首先引入bootstarp fileinput的相关js文件css文件

<script src="../../static/bootstrap-fileinput/js/fileinput.min.js"></script>
<link rel="stylesheet" href="../../static/bootstrap-fileinput/css/fileinput.min.css"/>
<!--配置中文，但是没有汉化成功，只能在配置里重写-->
<script src="../../static/bootstrap-fileinput/js/locales/zh.js"></script>

2、定义文件上传框id属性为uploadfile

<input type="file" name="uploadfile" id="uploadfile" multiple="multiple" class="file-loading" >

3、初始化文件上传

$(document).ready(function() {
		getById(id);//这是我自己的获取数据方法，不要直接复制
		$("#uploadfile").fileinput({
		    language: 'zh', //设置语言
		    uploadUrl: "/website/ueUploadController/picUpload", //上传的地址，改成自己的
		    allowedFileExtensions: ['jpg', 'gif', 'png'],//接收的文件后缀
		    initialPreviewAsData:true,
		    initialPreview: vm.cmsVideoProduct.tcpPic,//vm.cmsVideoProduct.tcpPic这是avalon定义好，在getById里面已经赋值，取回显路径，不要直接复制
		    /* initialCaption: row.fileName, */
		    uploadAsync: true, //默认异步上传
		    showUpload: true, //是否显示上传按钮
		    showRemove : true, //显示移除按钮
		    showPreview : true, //是否显示预览
		    showCaption: false,//是否显示标题
		    browseClass: "btn btn-primary", //按钮样式     
		    dropZoneEnabled: false,//是否显示拖拽区域
		    maxFileCount: 1, //表示允许同时上传的最大文件个数
		    maxFileSize:10 *1024 *1024,
		    messages: {maxFileSize:'文件上传的最大大小为 10MB',acceptFileTypes:'此文件是不支持的图片格式'    },
		    enctype: 'multipart/form-data',
		    validateInitialCount:true
		});
		
		//导入文件上传完成之后的事件
	    $("#uploadfile").on("fileuploaded", function (event, data, previewId, index) {
	        var response = data.response;
	        alert(response.filePath);
	        $("#fileMd5").val(response.fileMd5);
	        $("#version").val(response.newVersionName);
	        $("#url").val(response.filePath);
	        vm.cmsVideoProduct.tcpPic = response.filePath;
	       
	    });
		
		$('#uploadfile').on('filepreupload', function(event, data, previewId, index) {
		   var form = data.form, files = data.files, extra = data.extra,
		    response = data.response, reader = data.reader;
		});
	
	})

4、java文件上传部分（注：为了方便读代码，路径都写在了代码里面，请自行将路径配置到自己的配置文件下）

...
private String baseUrl ="H:/project";// 拿到配置文件配置的路径

@RequestMapping(value = "/picUpload")
	public Map<String, Object> upload(HttpServletRequest request, HttpServletResponse response) throws IOException {
		String saveUrl = "/upload/2019website";//文件保存路径前缀 必须包含upload
		saveUrl += "/mainPic/" + new SimpleDateFormat("yyyyMMdd").format(new Date()) + "/";
		
		 MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
		 /** 页面控件的文件流* */
	        MultipartFile multipartFile = null;
	        Map map =multipartRequest.getFileMap();
	         for (Iterator i = map.keySet().iterator(); i.hasNext();) {
	                Object obj = i.next();
	                multipartFile=(MultipartFile) map.get(obj);

	               }
		
		JSONObject json = new JSONObject();
		try {
			String fileName = multipartFile.getOriginalFilename();
			String oldName = fileName;
			String fileType = fileName.substring(fileName.indexOf(".") + 1);
			// 生成随机字符串名，防止出现中文乱码的情况
			fileName = getRandomString(15) + "." + fileType;
			File dest = new File(baseUrl + saveUrl + "/" + fileName);
			if (!dest.getParentFile().exists()) { // 判断文件父目录是否存在
				dest.getParentFile().mkdirs();
			}
			multipartFile.transferTo(dest); // 保存文件
			//按照相应的json数据格式返回结果
			json.put("newVersionName", fileName);
	        json.put("fileMd5", Files.hash(dest, Hashing.md5()).toString());
	        json.put("message", "应用上传成功");
	        json.put("status", true);
	        json.put("filePath", saveUrl + fileName);
		} catch (Exception e) {
			json.put("status", false);
			e.printStackTrace();
		}
		response.getWriter().print(json.toString());
		return null;
	}