<form th:action="@{/admin/addMember}" method="post" enctype="multipart/form-data" id="addMember">
              <div class="file-field input-field">
                <div class="btn">
                  <span>選擇頭像文件</span>
                  <input id="file" type="file" name="iconPath" multiple="" placeholder="選擇文件" accept="image/*" onchange="changeToop()">
                </div>
                <div class="file-path-wrapper">
                  <!--<input class="file-path validate" type="text" placeholder="Upload one or more files">-->
                  <img id="myimg" src="assets/iconPath/common.jpg" class="img-responsive img-thumbnail" style="width: 20%;height: 20%" />
                </div>
                <!--頭像文件上傳預(yù)覽-->
                <script>
                  function Id(id){
                    return document.getElementById(id);
                  }
                  function changeToop(){
                    var file = Id("file");
                    if(file.value===''){
                      //設(shè)置默認(rèn)圖片
                      Id("myimg").src='assets/iconPath/common.jpg';
                    }else{
                      preImg("file","myimg");
                    }
                  }
                  //獲取input[file]圖片的url Important
                  function getFileUrl(fileId) {
                    var url;
                    var file = Id(fileId);
                    var agent = navigator.userAgent;
                    if (agent.indexOf("MSIE")>=1) {
                      url = file.value;
                    } else if(agent.indexOf("Firefox")>0) {
                      url = window.URL.createObjectURL(file.files.item(0));
                    } else if(agent.indexOf("Chrome")>0) {
                      url = window.URL.createObjectURL(file.files.item(0));
                    }
                    return url;
                  }
                  //讀取圖片后預(yù)覽
                  function preImg(fileId,imgId) {
                    var imgPre =Id(imgId);
                    imgPre.src = getFileUrl(fileId);
                  }
                </script>
              </div>
              
              .......
              
            </form>

@PostMapping("/addMember")
  public String addMember(Member member, String gradeName, MultipartFile icon, Map<String, Object> model) {
    //處理上傳文件
    try {
      if (icon == null)//首先判斷上傳文件不為null
        return "error";
      if (icon.getOriginalFilename().equals("")) //如果上傳文件的原名為空字符串，則證明使用了默認(rèn)圖像
        member.setIconPath("/assets/icon/common.jpg"); //設(shè)置為我們的默認(rèn)圖像路徑
      else
        //這里通過了自己編寫的文件上傳工具類來處理上傳的MultipartFile，文件名設(shè)置為通過UUID產(chǎn)生的字符串
        member.setIconPath(FileUploadUtil.upload(icon, "/assets/icon/", UUIDRandomUtil.get32UUID()));
    } catch (Exception e) {
      e.printStackTrace();
      return "error";
    }
    
    .......
    
    return "addMemberSuccess";
  }

public class FileUploadUtil {
  /**
   * 上傳文件
   * @param multipartFile multipartFile
   * @param prefixPath 前綴路徑，相對(duì)于整個(gè)項(xiàng)目中的路徑，路徑最前面不用加入“/”
   * @param fileName 上傳后的文件名
   * @return 上傳后最終的相對(duì)路徑+文件名
   * @throws Exception 有可能空指針異常和IO異常
   */
  public static String upload(MultipartFile multipartFile, String prefixPath, String fileName) throws Exception {
    //得出上傳的絕對(duì)路徑
    String uploadPath = ClassUtils.getDefaultClassLoader().getResource("").getPath() +"/static"+ prefixPath;
    File file = new File(uploadPath);
    if (!file.exists())
      if (file.mkdirs())
        System.out.println("成功創(chuàng)建目錄");
    //獲取上傳的后綴名
    String suffixName = multipartFile.getOriginalFilename().substring(multipartFile.getOriginalFilename().lastIndexOf("."));
    //新建最終確定的文件
    file = new File(uploadPath+fileName+suffixName);
    multipartFile.transferTo(file);
    return prefixPath+fileName+suffixName;
  }
}