bootstrap fileinput组件整合Springmvc上传图片到本地磁盘

<!-- jq --><script type="text/javascript" src="<%=basePath%>static/plugs/jquery-3.1.1.min.js"></script><!-- bootstrap --><link rel="stylesheet" href="<%=basePath%>static/plugs/bootstrap/css/bootstrap.min.css" rel="external nofollow" ><script type="text/javascript" src="<%=basePath%>static/plugs/bootstrap/js/bootstrap.min.js"></script><link href="<%=basePath%>css/xlstyle.css" rel="external nofollow" rel="stylesheet"><!-- 图片上传即使预览插件 --><link rel="stylesheet" href="<%=basePath%>static/plugs/bootstrap-fileinput/css/fileinput.min.css" rel="external nofollow" ><script type="text/javascript" src="<%=basePath%>static/plugs/bootstrap-fileinput/js/fileinput.min.js"></script> <!-- 这个是汉化--><script type="text/javascript" src="<%=basePath%>static/plugs/bootstrap-fileinput/js/locales/zh.js"></script>

<form class="form-horizontal" role="form" method="post"     action="<%=basePath%>addArticle" enctype="multipart/form-data">     <div class="form-group">      <label class="col-sm-2 control-label">菜谱名称</label>      <div class="col-sm-10">       <input type="text" name="describ" class="col-sm-10 form-control"        placeholder="菜谱名称">      </div>     </div>     <div class="form-group">      <label class="col-sm-2 control-label">菜谱封面</label>      <div class="col-sm-10">       <input type="file" name="myfile" data-ref="url2"        class="col-sm-10 myfile" value="" /> <input type="hidden"        name="url2" value="">      </div>     </div>

</body><script type="text/javascript"> $(".myfile").fileinput({  //上传的地址  uploadUrl:"<%=basePath%>food/uploadFile",  uploadAsync : true, //默认异步上传  showUpload : false, //是否显示上传按钮,跟随文本框的那个  showRemove : false, //显示移除按钮,跟随文本框的那个  showCaption : true,//是否显示标题,就是那个文本框  showPreview : true, //是否显示预览,不写默认为true  dropZoneEnabled : false,//是否显示拖拽区域，默认不写为true，但是会占用很大区域  //minImageWidth: 50, //图片的最小宽度  //minImageHeight: 50,//图片的最小高度  //maxImageWidth: 1000,//图片的最大宽度  //maxImageHeight: 1000,//图片的最大高度  //maxFileSize: 0,//单位为kb，如果为0表示不限制文件大小  //minFileCount: 0,  maxFileCount : 1, //表示允许同时上传的最大文件个数  enctype : 'multipart/form-data',  validateInitialCount : true,  previewFileIcon : "<i class='glyphicon glyphicon-king'></i>",  msgFilesTooMany : "选择上传的文件数量({n}) 超过允许的最大数值{m}！",  allowedFileTypes : [ 'image' ],//配置允许文件上传的类型  allowedPreviewTypes : [ 'image' ],//配置所有的被预览文件类型  allowedPreviewMimeTypes : [ 'jpg', 'png', 'gif' ],//控制被预览的所有mime类型  language : 'zh' }) //异步上传返回结果处理 $('.myfile').on('fileerror', function(event, data, msg) {  console.log("fileerror");  console.log(data); }); //异步上传返回结果处理 $(".myfile").on("fileuploaded", function(event, data, previewId, index) {  console.log("fileuploaded");  var ref = $(this).attr("data-ref");  $("input[name='" + ref + "']").val(data.response.url); }); //同步上传错误处理 $('.myfile').on('filebatchuploaderror', function(event, data, msg) {  console.log("filebatchuploaderror");  console.log(data); }); //同步上传返回结果处理 $(".myfile").on("filebatchuploadsuccess",   function(event, data, previewId, index) {    console.log("filebatchuploadsuccess");    console.log(data);   }); //上传前 $('.myfile').on('filepreupload', function(event, data, previewId, index) {  console.log("filepreupload"); });</script>

@Controller@RequestMapping("/food")public class PictureController { // uploadFile @RequestMapping("/uploadFile") @ResponseBody public Map<String, Object> uploadFile(MultipartFile myfile)   throws IllegalStateException, IOException {  // 原始名称  String oldFileName = myfile.getOriginalFilename(); // 获取上传文件的原名//  System.out.println(oldFileName);  // 存储图片的虚拟本地路径（这里需要配置tomcat的web模块路径，双击猫进行配置）  String saveFilePath = "E://picture";  // 上传图片  if (myfile != null && oldFileName != null && oldFileName.length() > 0) {   // 新的图片名称   String newFileName = UUID.randomUUID() + oldFileName.substring(oldFileName.lastIndexOf("."));   // 新图片   File newFile = new File(saveFilePath + "//" + newFileName);   // 将内存中的数据写入磁盘   myfile.transferTo(newFile);   // 将新图片名称返回到前端   Map<String, Object> map = new HashMap<String, Object>();   map.put("success", "成功啦");   map.put("url", newFileName);   return map;  } else {   Map<String, Object> map = new HashMap<String, Object>();   map.put("error", "图片不合法");   return map;  } }}