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")@ResponseBodypublic 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="" 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>

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