前台添加多个文件并通过ajax提交的写法

 

form写法

<form enctype="multipart/form-data" action="" id="from-pro"  method="post">
<div class="col-md-12">
		   		<div class="input-group">
		            <span class="input-group-addon">京东事业部商品编码</span>
		            <c:if test="${empty product.jdcode}">
		           <input type="text" value="${product.jdcode }"  class="form-control" placeholder="请输入京东事业部商品编码" id="jdcode" name="jdcode" >
		           	</c:if>
		           	 <c:if test="${not empty product.jdcode}">
		           <input type="text" value="${product.jdcode }"  class="form-control" placeholder="请输入京东事业部商品编码" id="jdcode" name="jdcode" readonly="readonly">
		           	</c:if>
		           	</div>
		   </div>
		   <div class="col-md-12">
		   		<div class="input-group">
		            <span class="input-group-addon">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;价格</span>
		           <input type="text" value="${product.price }"  class="form-control" placeholder="请输入价格" id="price" name="price" >
		           	</div>
		   </div>
	   		<div class="col-md-12">
		   		<div class="input-group">
		            <span class="input-group-addon">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;产品名称</span>
					<input type="text" value="${product.name }"  class="form-control" placeholder=" 请输入产品名称" id="name" name="name" disabled="disabled">
		           	</div>
		   </div>
		   <div class="col-md-12">
		   		<div class="input-group">
		            <span class="input-group-addon">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;标签条码(69码)</span>
					<input type="text" value="${product.code }"  class="form-control" placeholder=" 请输入标签条码(69码)" id="code" name="code" disabled="disabled">
		           	</div>
		   </div>
		   <div class="col-md-12">
		   		<div class="input-group">
		            <span class="input-group-addon">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;酒精度%vol</span>
					<input type="text" value="${product.jjd }"  class="form-control" placeholder=" 请输入酒精度%vol" id="jjd" name="jjd" disabled="disabled">
		           	</div>
		   </div>
		   <div class="col-md-12">
		   		<div class="input-group">
		            <span class="input-group-addon">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;容量ml</span>
					<input type="text" value="${product.volume }"  class="form-control" placeholder=" 请输入容量ml" id="volume" name="volume" disabled="disabled">
		           	</div>
		   </div>
		    
		    
		   <div class="col-md-12">
		   		<div class="input-group">
		            <span class="input-group-addon">小图(尺寸:150X150px)</span>
		          	 <input name="file"  type="file" id="loadfile"  style="margin-top:1px">
		           	</div>
		           
		   </div>
		   <div class="col-md-12">
		   		<div class="input-group">
		            <span class="input-group-addon">大图(尺寸:260X260px)</span>
		          	 <input name="file2"  type="file" id="loadfile2" style="margin-top:1px">
		           	</div>
		           
		   </div>
		   <div class="col-md-12">
		   		<div class="input-group">
		            <span class="input-group-addon">详情图</span>
		          	 <input name="file3"  type="file" id="loadfile3" style="margin-top:1px">
		           	</div>
		           
		   </div>
		   
		   <div class="col-md-12">
		   		<input id="btn" type="button" class="btn btn-primary btn-large" style="float:right" onclick="yanzheng()" value="确认"/>
			</div>
   		</div>
   		</form>

js写法

$.ajaxSetup({      //设置ajax提交为同步提交
	  	    async : false
	  	});  
  		//保存
  		function yanzheng(){
  			$("#btn").attr("disabled", true); 
  			/* var file = document.getElementById("loadfile"); 
  			if (file.value != ""  && file.files[0].size>2097152 ) { 
  				layer.msg('附件大小不能大于2M');
				$("#btn").attr("disabled", false);
  				return;
  			}
		    
  			var file2 = document.getElementById("loadfile2"); 
  			if (file2.value != "" ) { 
  				layer.msg('附件大小不能大于2M');
				$("#btn").attr("disabled", false);
  				return;
  			}
  			var file3 = document.getElementById("loadfile3"); 
  			
  			if (file3.value != "" ) { 
  				layer.msg('附件大小不能大于2M');
				$("#btn").attr("disabled", false);
  				return;
  			} */
  			
  			<%--
  			if(certnum == null || certnum == "") {
  				layer.msg("证书编号不能为空!");
  				return false;
  			}
  			--%>
  			var form = new FormData(document.getElementById("from-pro"));  
  			/* if(!check()){
  				layer.msg("价格必须为数字!");
  				$("#btn").attr("disabled", false);
  				return;
  			} */
  			if(/^\d+(\.\d{1,2})?$/.test($("#price").val())){
  				
  			}else{
  				layer.msg("价格框请输入精度为两位小数以内的正数!");
  				$("#btn").attr("disabled", false);
  				return;
  			}
  			$.ajax({
					type : "POST",
					url : "<%=basePath%>card/updateProduct",
					dataType:'text',
					async:false,
					data :form,
					processData: false,  
      				contentType: false,  
					success : function(data) {
						if(data=="picture"){
							layer.msg("请上传图片格式附件!(BMP/PNG/GIF/JPG/JPEG)", {icon: 5});
						}else if(data=="dub"){
							layer.msg("请勿重复提交!");
						}else if(data=="ok"){
							parent.layer.msg('操作成功!', {icon: 1});
 							var index = parent.layer.getFrameIndex(window.name); 
 							parent.refreshPage();
						}else if(data == "skuError"){
							layer.msg("sku不能重复!");
						}else{
							alert("保存失败!");
						}
						$("#btn").attr("disabled", false);
						parent.layer.close(index); 
					}
			});	
  		}
  		function check(){
	  		var data = document.getElementById("price").value;
	  		var reg = /^([0-9]|\.)+$/;//匹配一个马上的0-9和小数点
	  		if(reg.test(data) == true){
	  				return true;
	  			}else{
	  				return false;
	  			}
  		}

后台接受

@RequestMapping("/updateProduct")
	@ResponseBody
	public String updateProduct(HttpSession session, HttpServletRequest request, Product product, String token) {
		MultipartHttpServletRequest req = (MultipartHttpServletRequest) request;
		String id = request.getParameter("id");
		String msg = "";
		try {
			if (Double.parseDouble(product.getPrice()) < 0) {
				return "numError";
			} 
		} catch (Exception e) {
			log.error("价格必须为正数");
			
			return "numError";
		}
		try {
			//sku重复验证
			/*List<Product> groups=productDao.queryAllSku();
			for (Product product2 : groups) {
				if (product2.getSku().equals(product.getSku()) && !product.getId().equals(product2.getId())) {
					return "skuError";
				}
			}*/
			String path = session.getServletContext().getRealPath("");// 获取项目动态绝对路径
			String realpath=path;
			
			boolean b = UserAgentUtil.isRepeatSubmit(request, token);// 判断用户是否是重复提交(按钮连续快速点击两次)
			if (b == true) {
				// 重复提交
				return "dub";
			}
			String token1 = TokenProccessor.getInstance().makeToken();// 创建令牌
			request.getSession().removeAttribute("token");
			request.getSession().setAttribute("token", token1); // 在服务器使用session保存token(令牌)
			MultipartFile file1 = req.getFile("file");
			MultipartFile file2 = req.getFile("file2");
			MultipartFile file3 = req.getFile("file3");
			String url1 = "";
			String url2 = "";
			String url3 = "";
			
			if (null != file1 && !"".equals(file1.getOriginalFilename())) {
				// 物理路径(跟项目平级)

				String filename1 = file1.getOriginalFilename();
				String prefix1 = filename1.substring(filename1.lastIndexOf(".") + 1).toUpperCase();
				String reString1 = yanzheng(file1,prefix1);
				if (!"".equals(reString1)) {
					return reString1;
				}
				// 保存图片信息
				url1 =  "picture/" +  btUtil.getUUid() + "." + prefix1 ;
				product.setPicture(url1);
				
			}
			if (null != file2 && !"".equals(file2.getOriginalFilename())) {
				// 物理路径(跟项目平级)

				String filename2 = file2.getOriginalFilename();
				String prefix2 = filename2.substring(filename2.lastIndexOf(".") + 1).toUpperCase();
				String reString2 = yanzheng(file2,prefix2);
				if (!"".equals(reString2)) {
					return reString2;
				}
				// 保存图片信息
				url2 =  "picture/" + btUtil.getUUid() + "." + prefix2;
				product.setPicture2(url2);
				

			}
			if (null != file3 && !"".equals(file3.getOriginalFilename())) {
				// 物理路径(跟项目平级)

				String filename3 = file3.getOriginalFilename();
				String prefix3 = filename3.substring(filename3.lastIndexOf(".") + 1).toUpperCase();
				String reString3 = yanzheng(file3,prefix3);
				if (!"".equals(reString3)) {
					return reString3;
				}
				// 保存图片信息
				url3 =  "picture/" + btUtil.getUUid() + "." + prefix3 ;
				product.setPicture3(url3);
				

			}
			
			cardService.updateProduct(product);
			if (null != file1 && !"".equals(file1.getOriginalFilename())) {
				FileUtils.writeByteArrayToFile(new File(realpath+"/"+url1), file1.getBytes());
			}
			if (null != file2 && !"".equals(file2.getOriginalFilename())) {
				FileUtils.writeByteArrayToFile(new File(realpath+"/"+url2), file2.getBytes());
			}
			if (null != file3 && !"".equals(file3.getOriginalFilename())) {
				FileUtils.writeByteArrayToFile(new File(realpath+"/"+url3), file3.getBytes());
			}
			
			

		} catch (Exception e) {
			log.error(e.getMessage());
			e.printStackTrace();
			return "error";
		}
		return "ok";
	}

 

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值