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表单提交，并且上传多个图片和参数的样式了。