Spring MVC 多圖片上傳 ajax form表單 參數 提交後臺

最近做了一個項目，需要提交多個圖片到後臺，提交的時候還要把參數提交，原來做過上傳文件和上傳單個圖片，沒有記錄，現在記錄一下。

Spring：

Spring mvc上傳配置：

	<!-- SpringMVC上傳文件時，需要配置MultipartResolver處理器 -->  
    <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">  
          <property name="defaultEncoding" value="utf-8" /> 
           <!-- 指定所上傳文件的總大小不能超過10485760KB。注意maxUploadSize屬性的限制不是針對單個文件，而是所有文件的容量之和 -->   
          <property name="maxUploadSize" value="10485760000" />  
          <property name="maxInMemorySize" value="40960" />  
    </bean>

後臺Collentron：

	/**
	 * @Description 
	 * @Date 2017年7月13日下午6:40:30
	 * @param activityId
	 * @param className
	 * @param activityName
	 * @param request
	 * @return
	 */
	@RequestMapping(value = "insertActivityPhoto.do")
	@ResponseBody
	public Map<String, Object> insertActivityPhoto(HttpServletRequest request) {
		 //把帶二進制表單數據的request對象交給spring轉換 得到一個文件和普通數據分開的新request對象
	    MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
	    
	    // 獲取from表單參數
	    String activityIds = multipartRequest.getParameter("activityIds");
	    String classNames = multipartRequest.getParameter("classNames");
	    String activityNames = multipartRequest.getParameter("activityNames");
	    
 		
 	    //獲得Request中的圖片 photo 是from表單文件的name
	    List<MultipartFile> fileList = multipartRequest.getFiles("photo");          
	    for (MultipartFile mf : fileList) {  
            if(!mf.isEmpty()){
            	// 對素材進行操作
            }
        }
	    
	    Map<String, Object> map = new HashMap<>();
	    map.put("success", "true");
		map.put("msg", "添加照片成功！");
		return map;
	}

在這要感謝：http://blog.csdn.net/mao_ning/article/details/53055599

參考這篇博客才知道爲啥有時候獲取不了form表單的的參數等問題。

要保存圖片有兩種辦法：一種是獲取 MultipartFile.getInputStream()；然後進行存儲。

   第二種是MultipartFile.transferTo(文件要保存的路徑):

這種應該需要在上傳配置中配置臨時文件地址<property name="uploadTempDir" value="temp" />。

jsp前臺：

<form id="addPhotoFrom" method="post"  enctype="multipart/form-data">
<table>
<input type="hidden" id="activityIds" name="activityIds">
				<input type="hidden" id="classNames" name="classNames">
				<input type="hidden" id="activityNames" name="activityNames">
<tr align="left"  style="height:40px;">
				   <td style="color: #666666; font-size: 14px;">
						    頭  像：</td>
					<td><input id="picUrl1" name="photo" type="file" class="" value="" οnchange="fileUpLoad(this);" multiple></td>
				</tr>
				<tr id="showTX" style="display: none;" align="left"  style="height:40px;">
				   <td style="color: #666666; font-size: 14px;">
						      </td>
					<td><img id="showPhoto" src ="" style="heigth:50px;width:50px;"></td>
				</tr>
</table>
		</form>

普通的form表單 需要注意的就是enctype="multipart/form-data" 和 input  type是file 的multipe

fileUpLoad是h5的圖片回顯，選擇後直接進行回顯，現在只能回顯一個。

js：

/**
 * 圖片上傳
 */
function ajaxFileUpload() {

	var formData = new FormData(document.getElementById("addPhotoFrom"));//表單id

	$.ajax({
		url : "insertActivityPhoto.do",
		type : "POST",
		data : formData,
		async : false,
		cache : false,
		contentType : false,
		processData : false,
		success : function(data) {
			if (data) {
				ZENG.msgbox.show("添加成功", 4, 1000);
				$('#pho').datagrid('reload');
				loadPaperGird();
				$("#addPhoto").window('close');
			} else {
				ZENG.msgbox.show("添加失敗", 5, 1000);
			}
		},
		error : function(e) {
			ZENG.msgbox.show("添加失敗!", 5, 3000);
		}
	});

}

/**
 * 選擇圖片頁面回顯
 * 
 * @param _this
 * @returns {Boolean}
 */
function fileUpLoad(_this) {
	var ipt = document.getElementById("teacherimg");
	var file = _this.files[0];
	if (!/image\/\w+/.test(file.type)) { // html中已經用accept='image/*'限制上傳的是圖片了，此處判斷可省略
		alert("文件必須爲圖片！");
		return false;
	}
	if (!FileReader) {
		alert("你的瀏覽器不支持H5的FileReader");
		ipt.setAttribute("disabled", "disabled");// 瀏覽器不支持禁用input
		// type='file'文件上傳標籤
		return;
	}
	var fileReader = new FileReader();
	fileReader.readAsDataURL(file);// 將文件讀取爲Data URL 讀取結果放在result中
	fileReader.onload = function(e) {
		$("#showPhoto").attr("src", this.result);
		$("#showTX").show();
		console.log(this.result);
	};
}

直接把form表單放到FormData裏面進行ajax的提交。

以上就是ajax進行form表單提交，並且上傳多個圖片和參數的樣式了。