继上一篇对上传异常进行处理之后,当上传异常的时候的错误体验并不是很好,这里介绍用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和JQuery技术来创建的项目,它允许用户在不刷新整个页面的情况下进行文件的上传和下载操作,提高了交互效率,同时也保持了页面状态的连续性。 首先,我们要理解什么是...
同时,为了利用iframe实现无刷新上传,`target`属性应设置为iframe的ID。 3. **IFrame应用** IFrame作为目标表单提交点,可以让表单提交在背景中进行,不更新整个页面。创建一个隐藏的iframe,将表单的`action`...
总结来说,通过隐蔽的iframe实现无刷新上传文件操作,可以提供流畅的用户体验。这种方式结合ReactJS、AmazeUI和Node.js,利用iframe的特性以及JavaScript的事件处理机制,能够有效地处理文件上传并在上传完成后更新...
这里,我们找到`iframe`内的图片链接,并将其应用到页面上的`#imagePreview`元素,实现无刷新的图片展示。 总结起来,通过`iframe`和PHP,我们可以实现一个图片上传的功能,用户选择图片后,图片会被上传到服务器,...
然而,我们可以利用IFRAME(Inline Frame)来模拟实现AJAX式的无刷新文件上传,以达到类似的效果。 首先,我们需要理解AJAX的工作原理。AJAX允许我们在后台与服务器进行通信,更新部分网页内容,而无需刷新整个页面...
无刷新上传是Web开发中一种常见的需求,它能够让用户在上传文件时不必重新加载整个页面,从而提升用户体验。为了实现这一功能,本文展示了前端HTML和JavaScript代码,以及后端PHP代码的实现方法。 ### 知识点一:...
综上所述,通过隐藏IFrame实现无刷新上传文件是一种有效的策略,它避免了AJAX上传文件可能带来的复杂性,特别是处理大文件时。结合ReactJS、AmazeUI和Node.js,可以构建出优雅且功能强大的文件上传系统。虽然现在...
本示例以“jsp无刷新上传文件”为主题,结合使用了iframe、AJAX以及jsp技术,实现了这一功能。以下是相关的知识点详解: 1. **iframe(内联框架)**:iframe允许在HTML文档中嵌入另一个HTML文档,常用于实现页面的...
总结,实现"ajax无刷新上传图片",关键在于利用Ajax的异步特性结合IFrame规避文件上传限制,通过JavaScript控制前端交互,服务器端处理文件存储,最后通过Ajax更新页面状态,提供流畅的用户体验。在开发过程中,需要...
6. **服务器端处理**:虽然源码主要关注前端部分,但实现无刷新上传还需要服务器端的支持。服务器需要接收并处理这些文件,可能涉及到文件保存、权限控制、大小限制等逻辑。 7. **用户体验优化**:无刷新上传通常会...
本示例聚焦于使用jQuery实现无刷新上传,结合Ajax技术,实现高效、流畅的文件上传操作。我们将讨论以下几个关键知识点: 1. jQuery:jQuery是一个广泛使用的JavaScript库,简化了DOM操作、事件处理、动画和Ajax交互...
在PHP开发中,实现无刷新上传文件是一种提升用户体验的有效方式。这种技术主要依赖于HTML的`<iframe>`元素和JavaScript的异步处理。本压缩包中的代码源码展示了如何利用这些技术来创建一个基于PHP的无刷新文件上传...
在***中使用MVC架构模式实现无刷新上传文件的功能是前端与后端协同工作的结果。利用Iframe标签来创建一个隐藏的子窗口,可以将文件上传过程中的等待时间从主界面中剥离出来,从而实现页面无需整体刷新的用户体验。...
总结来说,无刷新文件上传是利用Ajax技术和HTML5的File API实现的一种高效、用户友好的上传方式。它通过异步通信和FormData对象处理文件,提供良好的用户体验,同时需要注意安全性、进度显示和跨域问题。开发者需要...
在ASP中实现无刷新文件上传,主要涉及以下技术点: 1. **AJAX**:无刷新上传的核心是AJAX(Asynchronous JavaScript and XML),它允许前端与后台进行异步通信,无需刷新整个页面。在这个项目中,可能使用了...
同时,为了实现无刷新上传,需要将此表单的`target`属性设置为一个隐藏的`iframe`,以便提交时在该`iframe`中加载提交结果。 ```jsp <!-- 文件输入控件 --> <!-- 其他表单元素 --> 上传" /> <iframe id=...
这种技术通过利用iframe和Ajax异步通信,可以提升用户体验,让用户在不离开当前页面的情况下完成图片上传。 首先,我们需要理解“无刷新”上传的核心原理。无刷新上传是指用户在提交表单后,页面不会重新加载或跳转...
综上所述,"ASP上传大全之四iframe上传组件"主要探讨了如何在ASP环境中,利用iframe实现无刷新的文件上传,涉及了HTML、JavaScript、ASP及服务器端的安全控制等多个技术层面。理解和掌握这些知识点,将有助于构建...