`
yo8237233
  • 浏览: 62726 次
  • 来自: 深圳
社区版块
存档分类
最新评论

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

    博客分类:
  • J2EE
阅读更多
继上一篇对上传异常进行处理之后,当上传异常的时候的错误体验并不是很好,这里介绍用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/
分享到:
评论

相关推荐

    iframe实现无刷新上传下载

    "iframe实现无刷新上传下载"是一个利用IFrame和JQuery技术来创建的项目,它允许用户在不刷新整个页面的情况下进行文件的上传和下载操作,提高了交互效率,同时也保持了页面状态的连续性。 首先,我们要理解什么是...

    php+iframe 无刷新上传

    同时,为了利用iframe实现无刷新上传,`target`属性应设置为iframe的ID。 3. **IFrame应用** IFrame作为目标表单提交点,可以让表单提交在背景中进行,不更新整个页面。创建一个隐藏的iframe,将表单的`action`...

    通过隐蔽iframe实现无刷新上传文件操作_.docx

    总结来说,通过隐蔽的iframe实现无刷新上传文件操作,可以提供流畅的用户体验。这种方式结合ReactJS、AmazeUI和Node.js,利用iframe的特性以及JavaScript的事件处理机制,能够有效地处理文件上传并在上传完成后更新...

    iframe实现页面局部刷新操作

    这里,我们找到`iframe`内的图片链接,并将其应用到页面上的`#imagePreview`元素,实现无刷新的图片展示。 总结起来,通过`iframe`和PHP,我们可以实现一个图片上传的功能,用户选择图片后,图片会被上传到服务器,...

    JSP_模拟AJAX实现无刷新文件上传

    然而,我们可以利用IFRAME(Inline Frame)来模拟实现AJAX式的无刷新文件上传,以达到类似的效果。 首先,我们需要理解AJAX的工作原理。AJAX允许我们在后台与服务器进行通信,更新部分网页内容,而无需刷新整个页面...

    php利用iframe实现无刷新文件上传功能的代码

    无刷新上传是Web开发中一种常见的需求,它能够让用户在上传文件时不必重新加载整个页面,从而提升用户体验。为了实现这一功能,本文展示了前端HTML和JavaScript代码,以及后端PHP代码的实现方法。 ### 知识点一:...

    通过隐藏iframe实现无刷新上传文件操作

    综上所述,通过隐藏IFrame实现无刷新上传文件是一种有效的策略,它避免了AJAX上传文件可能带来的复杂性,特别是处理大文件时。结合ReactJS、AmazeUI和Node.js,可以构建出优雅且功能强大的文件上传系统。虽然现在...

    jsp无刷新上传文件

    本示例以“jsp无刷新上传文件”为主题,结合使用了iframe、AJAX以及jsp技术,实现了这一功能。以下是相关的知识点详解: 1. **iframe(内联框架)**:iframe允许在HTML文档中嵌入另一个HTML文档,常用于实现页面的...

    ajax无刷新上传图片

    总结,实现"ajax无刷新上传图片",关键在于利用Ajax的异步特性结合IFrame规避文件上传限制,通过JavaScript控制前端交互,服务器端处理文件存储,最后通过Ajax更新页面状态,提供流畅的用户体验。在开发过程中,需要...

    [上传下载]多文件无刷新上传源码

    6. **服务器端处理**:虽然源码主要关注前端部分,但实现无刷新上传还需要服务器端的支持。服务器需要接收并处理这些文件,可能涉及到文件保存、权限控制、大小限制等逻辑。 7. **用户体验优化**:无刷新上传通常会...

    jquery 无刷新上传 ajax 无刷新上传

    本示例聚焦于使用jQuery实现无刷新上传,结合Ajax技术,实现高效、流畅的文件上传操作。我们将讨论以下几个关键知识点: 1. jQuery:jQuery是一个广泛使用的JavaScript库,简化了DOM操作、事件处理、动画和Ajax交互...

    基于PHP的使用Iframe无刷新上传的代码源码.zip

    在PHP开发中,实现无刷新上传文件是一种提升用户体验的有效方式。这种技术主要依赖于HTML的`&lt;iframe&gt;`元素和JavaScript的异步处理。本压缩包中的代码源码展示了如何利用这些技术来创建一个基于PHP的无刷新文件上传...

    asp.net中MVC借助Iframe实现无刷新上传文件实例

    在***中使用MVC架构模式实现无刷新上传文件的功能是前端与后端协同工作的结果。利用Iframe标签来创建一个隐藏的子窗口,可以将文件上传过程中的等待时间从主界面中剥离出来,从而实现页面无需整体刷新的用户体验。...

    无刷新文件上传实例

    总结来说,无刷新文件上传是利用Ajax技术和HTML5的File API实现的一种高效、用户友好的上传方式。它通过异步通信和FormData对象处理文件,提供良好的用户体验,同时需要注意安全性、进度显示和跨域问题。开发者需要...

    asp仿163网盘无刷新文件上传

    在ASP中实现无刷新文件上传,主要涉及以下技术点: 1. **AJAX**:无刷新上传的核心是AJAX(Asynchronous JavaScript and XML),它允许前端与后台进行异步通信,无需刷新整个页面。在这个项目中,可能使用了...

    jsp+ajax实现无刷新上传文件的方法.docx

    同时,为了实现无刷新上传,需要将此表单的`target`属性设置为一个隐藏的`iframe`,以便提交时在该`iframe`中加载提交结果。 ```jsp &lt;!-- 文件输入控件 --&gt; &lt;!-- 其他表单元素 --&gt; 上传" /&gt; &lt;iframe id=...

    php+jquery无刷新上传图片

    这种技术通过利用iframe和Ajax异步通信,可以提升用户体验,让用户在不离开当前页面的情况下完成图片上传。 首先,我们需要理解“无刷新”上传的核心原理。无刷新上传是指用户在提交表单后,页面不会重新加载或跳转...

    asp上传大全之四iframe上传组件

    综上所述,"ASP上传大全之四iframe上传组件"主要探讨了如何在ASP环境中,利用iframe实现无刷新的文件上传,涉及了HTML、JavaScript、ASP及服务器端的安全控制等多个技术层面。理解和掌握这些知识点,将有助于构建...

Global site tag (gtag.js) - Google Analytics