利用iframe实现无刷新上传处理

继上一篇对上传异常进行处理之后，当上传异常的时候的错误体验并不是很好，这里介绍用iframe来进行错误提示

拦截错误

	@ExceptionHandler(MaxUploadSizeExceededException.class)         
    public String handleException(Exception ex,HttpServletRequest request,HttpServletResponse response) {       
		try {
         if (ex instanceof org.springframework.web.multipart.MaxUploadSizeExceededException){  
        	 	request.setAttribute("msg", "图片的总计大小不能超过50M ");
         	}
		} catch (Exception e) {
			e.printStackTrace();
		}
//      return "redirect:/sales/apply/onLodaImageUplod.do?mspNo="+mspNo;  
		return "views/sales/apply/a_image_uploading_error";  

控制器

	@RequestMapping(value = "/sales/apply/imageUploding")
	public String imageUploding(String mspNo, HttpServletRequest request,
			HttpServletResponse response , PrintWriter write 
			,@RequestParam("chargeFront") CommonsMultipartFile chargeFront	
			,@RequestParam("applicantIdFront") CommonsMultipartFile applicantIdFront
			,@RequestParam("applicantIdSide") CommonsMultipartFile applicantIdSide
			,@RequestParam("insuredsIdFront") CommonsMultipartFile insuredsIdFront
			,@RequestParam("insuredsIdSide") CommonsMultipartFile insuredsIdSide
			,Model model
			)
	{
               //逻辑处理代码

		return "views/sales/apply/a_image_uploading_error";
	}

a_image_uploading.jsp

<form action="${ctx}sales/apply/imageUploding.do?applyBarCode=${applyBarCode}&mspNo=${mspNo}" method="post" id="fm" enctype="multipart/form-data">
				<table border="0" cellspacing="0" cellpadding="0" class="T1" width="100%">
					<tr>
						<td  colspan="4"  style="font-size: 12px;color: red;">
							<span style="margin-left: 20%">
							提示：影像仅支持JPG格式，且单张图片不能超过5M，影像上传过程中，切勿关闭页面，谢谢。
							</span>
						</td>
					</tr>
					<tr  height="35px">
						<td width="35%" align="right"> 缴费卡照片：</td>
						<td width="65%">
						<input type="file" name="chargeFront" id="chargeFront" onchange="onchangeFileImage(this.value,'chargeFrontSpanId')"/>
						<span id="chargeFrontSpanId" style="color: red">${requestScope.bytesMap['chargeFrontMessage']}</span>
						</td>
					</tr>
				</form>
			</div>
		<iframe name="frame" style="display:none"></iframe>	
		<p class="tac" style="padding: 5px;">
		<span id="hint" style="font-size: 12px;color: red;"></span>
		</p>
		<p class="tac" style="padding: 5px;">
		<a href="#" id="imageUploading" class="m_l10 btn btn_redV" >下一步</a>
		</p>
		</div>

		 $("#imageUploading").click(function() {
			 			document.getElementById('hint').innerHTML = '<span id="hint" style="font-size: 12px;color: red;"></span>';
			 		if(checkoutImage()){
			 			var bln = window.confirm("进入自核后，您录入的投保信息以及拍摄的资料将无法再修改，是否继续？");  
			 			document.forms['fm'].target = 'frame';
			 			if(bln){
			 			//showUploadBlock();
			 			//showBlock();
				  		 $("#fm").submit();
			 		}
			 		}
			});

a_image_uploading_error.jsp

<script type="text/javascript">
  window.onload = function(){
	  //移除遮罩层
	  window.parent.hideBlock();
	  var mspNo = document.getElementById('mspNostr').value;
	  // 本页面获得的提示信息
	  if(document.getElementById('subhint'))
	  {
	      var hint = document.getElementById('subhint').innerHTML; 
	       // 找到父页面
	       if(window.parent){
	            if(window.parent.reset){
	                    window.parent.reset();
	            }
	            if(window.parent.document.getElementById('hint')){
	            		window.parent.location.reload();
	                    window.parent.document.getElementById('hint').innerHTML = hint;
	            }
	       }
	   }

	  if(mspNo)
	  {
	  	window.parent.location.href = "${ctx}/sales/apply/ownCheck.do?mspNo="+mspNo;
	  }
  }
</script>


</body>
<span id="subhint">${msg}</span>
<input type="hidden" id="mspNostr" value="${mspNo}">

博客地址：http://qiaoyihang.iteye.com/