<!-- 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">
<!-- 圖片上傳即使預(yù)覽插件 -->
<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, //默認(rèn)異步上傳
  showUpload : false, //是否顯示上傳按鈕,跟隨文本框的那個
  showRemove : false, //顯示移除按鈕,跟隨文本框的那個
  showCaption : true,//是否顯示標(biāo)題,就是那個文本框
  showPreview : true, //是否顯示預(yù)覽,不寫默認(rèn)為true
  dropZoneEnabled : false,//是否顯示拖拽區(qū)域，默認(rèn)不寫為true，但是會占用很大區(qū)域
  //minImageWidth: 50, //圖片的最小寬度
  //minImageHeight: 50,//圖片的最小高度
  //maxImageWidth: 1000,//圖片的最大寬度
  //maxImageHeight: 1000,//圖片的最大高度
  //maxFileSize: 0,//單位為kb，如果為0表示不限制文件大小
  //minFileCount: 0,
  maxFileCount : 1, //表示允許同時上傳的最大文件個數(shù)
  enctype : 'multipart/form-data',
  validateInitialCount : true,
  previewFileIcon : "<i class='glyphicon glyphicon-king'></i>",
  msgFilesTooMany : "選擇上傳的文件數(shù)量({n}) 超過允許的最大數(shù)值{m}！",
  allowedFileTypes : [ 'image' ],//配置允許文件上傳的類型
  allowedPreviewTypes : [ 'image' ],//配置所有的被預(yù)覽文件類型
  allowedPreviewMimeTypes : [ 'jpg', 'png', 'gif' ],//控制被預(yù)覽的所有mime類型
  language : 'zh'
 })
 //異步上傳返回結(jié)果處理
 $('.myfile').on('fileerror', function(event, data, msg) {
  console.log("fileerror");
  console.log(data);
 });
 //異步上傳返回結(jié)果處理
 $(".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);
 });
 //同步上傳返回結(jié)果處理
 $(".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);
   // 將內(nèi)存中的數(shù)據(jù)寫入磁盤
   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;
  }
 }
}