带图片上传的,多行表单记录提交

效果图

 

前台页面代码:

<form target="form" id="myform" action="<%=basePath%>wxorder/submit" method="post" enctype="multipart/form-data">
		<div class="order-addr chose">
			<div class="order-addr-user">${name }<span class="addr-tel">${phone }</span>
			</div>
			<a href="javascript:;" class="order-addr-user">${addr }</a>
		</div>
		<input type="hidden" name="addr" id="addr" value="${name },${phone },${addr }">
		<input type="hidden" name="proInfo" id="jsonArray">
		<input type="hidden" name="orderNum" value="${orderNum }">
		<input type="hidden" name="userId" value="${userId }">
		<div class="order-detail">
			<h5 >订单号：${orderNum } </h5>
			<!-- <div class="weui_panel_bd">
            		<a href="javascript:void(0);" class="weui_media_box weui_media_appmsg">
                	<div class="weui_media_bd">
                    <h4 class="weui_media_title">吕家传</h4>
                    <p class="weui_media_desc">被信任是一种责任</p>
                </div> -->
			<!-- <input type="hidden" name="goods_id" id="goods_id" value="25">
			</a>
			<div class="order-num">
				产品1 价格：888
				<div class="goods-num">
					<input type="number" min="1" value="5" style="width: 0.7rem"> 盒
				</div>
			</div> -->
			<div id='product' >
				
			</div>
			<div class="order-remarks">
				<input id="zongjia1" type="hidden" name="totalPrice">
			<!-- <input type="text" onchange="console.log(this.value);" />  -->
				总价：<input id="zongjia" type="text" class="input-remark"  readonly="readonly" value="" >
			</div>
			<div class="order-remarks" style="text-align: center;" onclick = "selectPro();">
				<a href="javascript:;" class="a-upload">
					<input type="button" value="添加产品"  >添加产品
				</a>
			</div>
			<div class="order-remarks">
				备注信息 <input type="text" name="remark1" placeholder="请输入备注信息" class="input-remark">
			</div>
			<div class="order-remarks" style="line-height:28px">
			
				支付截图 <a href="javascript:;" style="float: right" id="filea" class="a-upload"> <input type="file"
					 name="file" id="" onchange="changeFile(this.value)">点击这里上传文件
				</a>
				<div style="clear:both"></div>
			</div>
			
			<div class="order-remarks">
				截图名称:<input  type="text" class="input-remark" readonly="readonly" id="tupian">
			</div>
		</div>
		</form>
		<iframe name="form" id="form" style="display: none"></iframe>

js代码

(function($){
        $.fn.serializeJson = function(){
            var jsonData1 = {};
            var serializeArray = this.serializeArray();
            // 先转换成{"id": ["12","14"], "name": ["aaa","bbb"], "pwd":["pwd1","pwd2"]}这种形式
            $(serializeArray).each(function () {
                if (jsonData1[this.name]) {
                    if ($.isArray(jsonData1[this.name])) {
                        jsonData1[this.name].push(this.value);
                    } else {
                        jsonData1[this.name] = [jsonData1[this.name], this.value];
                    }
                } else {
                    jsonData1[this.name] = this.value;
                }
            });
            // 再转成[{"id": "12", "name": "aaa", "pwd":"pwd1"},{"id": "14", "name": "bb", "pwd":"pwd2"}]的形式
            var vCount = 0;
            // 计算json内部的数组最大长度
            for(var item in jsonData1){
                var tmp = $.isArray(jsonData1[item]) ? jsonData1[item].length : 1;
                vCount = (tmp > vCount) ? tmp : vCount;
            }

            if(vCount > 1) {
                var jsonData2 = new Array();
                for(var i = 0; i < vCount; i++){
                    var jsonObj = {};
                    for(var item in jsonData1) {
                        jsonObj[item] = jsonData1[item][i];
                    }
                    jsonData2.push(jsonObj);
                }
                return JSON.stringify(jsonData2);
            }else{
                return "[" + JSON.stringify(jsonData1) + "]";
            }
        };
    })(jQuery);


$("#btn_submit").on('click', function() {
				if($("#tupian").val()=='' || null == $("#tupian").val()){
					layer.open({
					    content: '请上传支付截图'
					    ,btn: '我知道了'
					  });
					return;
				}else if(!/.(gif|jpg|jpeg|png|gif|jpg|png)$/.test($("#tupian").val())){
		            alert("图片类型必须是.gif,jpeg,jpg,png中的一种");
		            return;
		        }
				var jsonStr = $("#myform").serializeJson();
				$("#jsonArray").val(jsonStr);
				$("#myform").submit();
				$("#form").load(function(){

					      var text = $(this).contents().find("body").text();      //获取到的是json的字符串

					     var j = $.parseJSON(text);                                         //json字符串转换成json对象

					     if(j.status == '1'){
						
						layer.open({
							  content: '成功',
							  btn: '我知道了',
							  shadeClose: false,
							  yes: function(){
								 window.location.href=window.location.href;
							  }
							});
						
					}else if(j.status == '0'){
						layer.open({
						    content: '失败'
						    ,btn: '我知道了'
						  });
					}else if(j.status == '3'){
						layer.open({
						    content: '订单号重复,请刷新页面'
						    ,btn: '我知道了'
						  });
					}else{
						layer.open({
						    content: '请填写大于0的整数'
						    ,btn: '我知道了'
						  });
					}

					})

			})
		});

后台接收:

@RequestMapping(value = "/submit")
	@ResponseBody
	public String submitUserList_4(HttpServletRequest request,String totalPrice, String orderNum, String addr,
			String remark1, String userId, String proInfo,
			@RequestParam(value = "file", required = false) MultipartFile file) {
		StanicOrder stanicOrder = new StanicOrder();
		JSONObject jsonObject = new JSONObject();
		try {
			//查询有无重复订单号,有则不能新增
			String chongfuNum = orderMapper.selectByOrderNum(orderNum);
			
			if (orderNum.equals(chongfuNum)) {
				jsonObject.put("status", 3);
				return jsonObject.toJSONString();
			}
			String realpath = request.getRealPath("/");// 获取项目动态绝对路径
														// D:\apache-tomcat-8.0.33\apache-tomcat-8.0.33\webapps\csywx\
			realpath = realpath.substring(0, realpath.lastIndexOf("\\"));
			realpath = realpath.substring(0, realpath.lastIndexOf("\\"));

			List<ProInfo> list = JSONObject.parseArray(proInfo, ProInfo.class);
			for(ProInfo pi:list) {
				if (!isPureDigital(pi.getNumber()) || Integer.valueOf(pi.getNumber()) == 0) {
					jsonObject.put("status", 2);
					return jsonObject.toJSONString();
				}
			}
			//获取发货方
			String fahuo = orderMapper.selectFahuo(userId);
			stanicOrder.setSendAgencyid(fahuo);
			stanicOrder.setId(GjUtil.getUUid());
			stanicOrder.setOrdernum(orderNum);
			stanicOrder.setReciveAddr(addr);
			stanicOrder.setRemark1(remark1);
			stanicOrder.setCrtdate(new Date());
			stanicOrder.setCrtuserid(userId);
			stanicOrder.setPrice(Double.valueOf(totalPrice));
			stanicOrder.setReciveAgencyid(stanicUserMapper.selectByPrimaryKey(userId).getAgencyid());
			String url1 = "";
			if (null != file && !"".equals(file.getOriginalFilename())) {
				// 物理路径（跟项目平级）

				String filename1 = file.getOriginalFilename();
				String prefix1 = filename1.substring(filename1.lastIndexOf(".") + 1).toUpperCase();
				String reString1 = yanzheng(file, prefix1);
				if (!"".equals(reString1)) {
					return reString1;
				}
				// 保存图片信息
				url1 = "picture/" + GjUtil.getUUid() + "." + prefix1;
				stanicOrder.setPayPicture(url1);

			}
			
			orderService.save(list,userId,stanicOrder);
			
			if (null != file && !"".equals(file.getOriginalFilename())) {
				FileUtils.writeByteArrayToFile(new File(realpath + "/" + url1), file.getBytes());
			}
			jsonObject.put("status", "1");
		} catch (IOException e) {
			log.info(e.getMessage());
			e.printStackTrace();
			jsonObject.put("status", "0");
		}
		return jsonObject.toJSONString();

	}

	/**
	 * 验证图片
	 * 
	 * @param file
	 * @param prefix
	 * @return
	 */
	private String yanzheng(MultipartFile file, String prefix) {
		String msg = "";
		if (prefix.equals("BMP") || prefix.equals("PNG") || prefix.equals("GIF") || prefix.equals("JPG")
				|| prefix.equals("JPEG")) {
		} else {
			msg = "picture";
			return msg;
		} /*
			 * if (file.getSize() > 2097152) { msg = "big"; return msg; }
			 */
		return msg;
	}
	/**
	 * 判断字符串是否为正整数
	 * @param string
	 * @return
	 */
	public static boolean isPureDigital(String string) {
        if (StringUtils.isBlank(string))
            return false;
        String regEx1 = "\\d+";
        Pattern p;
        Matcher m;
        p = Pattern.compile(regEx1);
        m = p.matcher(string);
        if (m.matches())
            return true;
        else
            return false;
    }