經過前面兩篇文章的鋪墊，接下來就是重點了，最原始的summernote的圖片上傳功能還未完善，現在我們要做的就是修改這個功能，使其功能完善派上用場。

    summernote提供了一些方法的重寫，我們就來重寫其上傳圖片的方法onImageUpload，然後將data資料傳送到upload.do這個controller，data資料中包含了上傳圖片的名字。editor.insertImage()的作用是在編輯器中顯示已經上傳的圖片，第一個引數表示當前編輯器，第二個引數是圖片儲存的路徑。

<script>
$(document).ready(function() {
  $('#summernote').summernote({
      height:300,
      focus:true,
      maxHeight:null,
      minHeight:null,
      onImageUpload: function(files, editor, welEditable) {
    	  sendFile(files[0],editor,welEditable);
    	  }
  });
});

function sendFile(files,editor,welEditable) {
    data = new FormData();
    data.append("file", files);
    $.ajax({
        data: data,
        type: "POST",
        url: "/lol/upload.do",
        cache: false,
        contentType: false,
        processData: false,
        success: function(data) {
        	alert(data.fileName);
        	editor.insertImage(welEditable, "img/" + data.fileName);
        },
        error: function(XMLHttpRequest, textStatus, errorThrown) {
            alert(XMLHttpRequest.status);
            alert(XMLHttpRequest.readyState);
            alert(textStatus);
        }
    });
}
 

@RequestMapping(value = "/upload.do")  
    public @ResponseBody Map upload(MultipartFile file, HttpServletRequest request) {  
  
        System.out.println("開始");  
        String path = request.getSession().getServletContext().getRealPath("/img");//專案中的img資料夾下
        String fileName = file.getOriginalFilename();  
//        String fileName = new Date().getTime()+".jpg";
        Map<String, Object> map = new HashMap<String, Object>();
        map.put("fileName",fileName);
        
        System.out.println(fileName);
        System.out.println(path);
        File targetFile = new File(path, fileName);  
        if(!targetFile.exists()){  
            targetFile.mkdirs();  
        }  
  
        //儲存  
        try {  
            file.transferTo(targetFile);  
        } catch (Exception e) {  
            e.printStackTrace();  
        }  
     
        System.out.println(fileName);
        return map;  
    }
 

    @ResponseBody這個註解，一般來說controller中返回的資料就會被當作頁面的名字進行處理，我們這裡需要將返回的資料給ajax處理，而不是跳轉到某個頁面，這就是此註解的作用。

    request.getSession().getServletContext().getRealPath();獲取專案的真實路徑，大家在eclipse中配置tomcat的時候別忘了將專案設定為部署在tomcat下，如圖：

    因為用到了上傳，所以別忘了配置上傳用的jar包：

<dependency>
	<groupId>commons-fileupload</groupId>
	<artifactId>commons-fileupload</artifactId>
	<version>1.3.1</version>
</dependency>
 

    SpringMVC 用的是MultipartFile來進行檔案上傳，所以我們首先要配置MultipartResolver:用於處理表單中的file：

<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"/>