Spring MVC + ajaxFileUpload 傳圖片到tomcat服務器與存路徑到數據庫

最近在做一個後臺系統，需要給用戶添加照片，但由於是用的ssm框架以前的圖片上傳類不能使用,翻來覆去弄了8-9個小時,在藉助度娘和csdn博客上各位大神的情況下終於成功了，把過程記錄下來分享給大家，希望能對大家有所幫助

1.準備jar包，js

maven項目在導入ssm框架的包的時候IDE(eclipse,IDEA...)會自動幫你導入，如果沒有請自行導入

和Jquery一樣需要引入到你的頁面

2.配置springMvc

<!-- 上傳文件 -->  
    <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">  
    <property name="defaultEncoding" value="utf-8"/>  
    <!-- 最大內存大小 -->  
    <property name="maxInMemorySize" value="10240"/>  
    <!-- 最大文件大小，-1爲不限制大小 -->  
    <property name="maxUploadSize" value="-1"/>  
    </bean> 

添加bean到你的spring配置文件中

3.編寫圖片上傳的工具類(你也可直接寫到Controller中,但爲了方便使用我們把它封裝起來)

package com.wz.util;

import java.io.File;
import java.io.IOException;
import java.util.Random;

import javax.servlet.http.HttpSession;

import org.apache.commons.io.FileUtils;
import org.apache.commons.io.FilenameUtils;
import org.springframework.web.multipart.commons.CommonsMultipartFile;

public class UploadImageUtil {
	
	public static String PATH="../../webapps/uploadFiles";//上傳的圖片存放位置
	String fileName=null; //文件名
	
	public String upload(CommonsMultipartFile file,HttpSession session){
		
		 String curProjectPath = session.getServletContext().getRealPath("/"); 
		 String saveDirectoryPath = curProjectPath + PATH;
		 String suffix = file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf(".")+1);//獲取文件後綴名
		 File saveDirectory = new File(saveDirectoryPath);
		if(!file.isEmpty()){//如果文件不爲空
			 fileName = System.currentTimeMillis()+new Random().nextInt(10000)+"_apicture"+"."+suffix; //隨機生成一個文件名 
			try {
				FileUtils.copyInputStreamToFile(file.getInputStream(), new File(saveDirectoryPath,fileName));//存入目標路徑
			} catch (IOException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			}
		}
		
		
		return "../uploadFiles"+"/"+fileName; //返回存入數據庫的路徑
	}
	
	
	

}

PATH:爲你的tomcat存放靜態資源路徑的位置 一般是你所安裝的tomcat目錄下webapps文件中，創建uploadFiles文件夾方便管理，當你的項目發佈到tomcat上時便可以直接瀏覽到服務器的靜態資源，獲取方式如下:

curProjectPath:這是獲取到你前臺傳過來的圖片的絕對路徑，tomcat會把它放到 X:\apache-tomcat-xx.xx\wtpwebapps\你的項目  目錄下(在我的電腦上是如此，如果不同可以自己去把它輸出到後臺辨別)，所以我們通過 ../../ webapps 的path把它放入

webapps中

可自行添加邏輯帶碼來完成文件類型上傳的限制

3.1 controller類

@RequestMapping("add.action")
	@ResponseBody
	public JsonMode addAdmin(@RequestParam("apicture") CommonsMultipartFile file,HttpSession session,HttpServletRequest request,HttpServletResponse response) throws Exception{
		JsonMode jsonMode = new JsonMode();
		upload = new UploadImageUtil();
		
                
                String apicture = upload.upload(file,session); //獲取存到數據庫的圖片路徑
		
		int result = adminBiz.addAdmin(apicture);
		System.out.println(result);
		if(result>0){
			jsonMode.setCode(1);
		}else{
			jsonMode.setCode(0);
		}
		
		return jsonMode;
	}

@RequestParam("apicture") CommonsMultipartFile file :獲取到前臺傳來的圖片文件流參數，@RequestParam註解內參數要與from表單內<input type="file"> name屬性一致

4.發ajax請求

$.ajaxFileUpload({
					url:"../../add.action",
					secureuri:false,
					fileElementId:"admin_add_photo",
					dataType:"json",
					enctype:"multipart/form-data",	
					success:function(data){
						if(data.code==1){
	
							$.messager.show({title:"成功提示",msg:"信息添加成功...",timeout:2000,showType:"slide"});
						}else{
							$.messager.alert("失敗提示","信息添加失敗...","error");
						}
					},
				});

fileElementId:需要和你的input id一致

需要注意的是：

enctype:"multipart/form-data",

這個屬性必須要添加上去，不然spring mvc會攔截你發送的文件流

 那麼至此文件便可以成功發送了，如果你想要接收到服務器返回的數據那麼你還需要修改一下ajaxFileUpload.js中的uploadHttpData方法,因爲它會自動給你返回的json數據加上<pre>標籤

修改後的uploadHttpData方法:

 uploadHttpData: function( r, type ) {
        var data = !type;
        data = type == "xml" || data ? r.responseXML : r.responseText;
        // If the type is "script", eval it in global context
        if ( type == "script" ){
        	 jQuery.globalEval( data );
        }
          
        // Get the JavaScript object, if JSON is used.
        if ( type == "json" ){
        	data = jQuery.parseJSON(jQuery(data).text());
        }
        // evaluate scripts within html
        if ( type == "html" ){
        	jQuery("<div>").html(data).evalScripts();
        }
        
        if(type=="text"){
        	return data;
;
        }
        return data;
    }