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

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>
 

	/**
	 * @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;
	}
 

參考這篇部落格才知道為啥有時候獲取不了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="" onchange="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>
 

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);
	};
}