bootstarp fileinputファイルアップロード実装方式(java SSMフレームワーク実装)

プロジェクトはメイン図のアップロードを実現する必要があります.以前、会社でbootstarp fileinputというbootstarpベースのファイルアップロードプラグインを使ったことがあります.バックエンドで開発された私にとって、フロントエンドはずっとbootstarpを使っています.だから、ファイルアップロードを実現するには、このプラグインを選ぶのが一番いいです.次は私の実現過程を記録し、使用したバックエンド技術はSSMです.フロントエンドページフレームbootstarp、データバインドフレームavalon.js、私のこの技術の選択型が簡単な前後の分離ではないことを知りませんか?問題や不合理な点があったら指摘してください.ありがとうございます.
1、まずbootstarp fileinputの関連jsファイルcssファイルを導入する

2、ファイルアップロードボックスid をuploadfileと する

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 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;
	}