通过iframe实现ajax方式上传文件

最新推荐文章于 2021-08-06 16:07:27 发布

情非得已1991

最新推荐文章于 2021-08-06 16:07:27 发布

阅读量600

点赞数

分类专栏： spring mvc 文章标签： spring mvc文件上传仿ajax上传文件

本文链接：https://blog.csdn.net/yu870646595/article/details/40112069

版权

spring mvc 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

今天在做文件上传的时候，后台控制层使用的为spring mvc，网上搜了一下，其对象上传文件的验证只有一个大小验证，是在请求到达Controller之前对上传的文件进行的校验。

一、.spring mvc文件上传配置

1.文件上传解析器配置

<!-- 文件上传解析器-->
	<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
		<!-- maxUploadSize配置的大小为单次上传文件的总大小，而不是每个文件的大小，如果配置上传文件总大小的限制，那么还需要上传大小超设置的异常，
			SpringMVC在超出上传文件限制时，会抛出org.springframework.web.multipart.MaxUploadSizeExceededException
		 -->
		<property name="maxUploadSize">10240</property>
		<property name="defaultEncoding">UTF-8</property>
	</bean>

2.配置异常映射处理器（当配置了文件上传的限制，那么就需要配置）

<!-- 配置mvc异常映射处理器 -->
	<bean class="org.springframework.web.servlet.handler.SimpleMappingExceptionResolver">
		<property name="exceptionMappings">
			<props>
				<prop key="org.springframework.web.bind.MissingServletRequestParameterException">/WEB-INF/error/requiredParameter.html</prop>
				<prop key="org.springframework.beans.TypeMismatchException">/WEB-INF/error/mismatchParameter.html</prop>
				<prop key="org.springframework.web.bind.ServletRequestBindingException">/WEB-INF/error/bindException.html</prop>
				<prop key="org.springframework.web.multipart.MaxUploadSizeExceededException">/WEB-INF/error/uploadException.html</prop>
			</props>
		</property>
	</bean>

3.在Controller文件上传的方法上添加MultipartFile类型的参数，用于接受上传的文件，如果为多文件上传，那么为MultipartFile[]

	/**
	 * 注意：MultipartFile前边的@RequestParam注解为必须的，否则报错，当前端name的值和file相同时，<span style="font-family: Arial, Helvetica, sans-serif;">@RequestParam的参数可以省略，当名称和file不一致时，</span>

<span style="font-family:Arial, Helvetica, sans-serif;">                              @RequestParam参数必须有</span>
	 */
	
	@RequestMapping("/upload.do")
	public ModelAndView upload(@RequestParam MultipartFile file,HttpServletRequest request){
		//验证上传文件的类型和大小(上传文件大小不超过1M,文件的类型为jpg、png)
		ModelAndView modelAndView = new ModelAndView();
		
		//非空验证
		WebErrors errors = validateUpload(file, request);
		if (errors.hasErrors()) {
			modelAndView.addObject("error", errors.getErrors().get(0));
			modelAndView.setViewName("register/attachment_iframe");
			return modelAndView;
		}
		
		//大小验证
		if(file.getSize()>1*1024*1024){
			modelAndView.addObject("error", "上传的文件大小不能超过1M!");
			modelAndView.setViewName("register/attachment_iframe");
			return modelAndView;
		}
		
		CmsSite site = CmsUtils.getSite(request);
		String origName = file.getOriginalFilename();
		String ext = FilenameUtils.getExtension(origName).toLowerCase(Locale.ENGLISH);

4.上传页面

注意上传文件，注意表单method="post",enctype="multipart/form-data"

二、spring mvc在上传文件存在的问题，spring mvc对上传文件的验证不好，比如说对上传文件的类型不能校验，上传结果非要跳转新的页面进行展示，而不能在上传页面进行展示。那么可以通过iframe实现的方式实现文件的上传。

1.上传文件表单

<span style="white-space:pre">	</span><form id="form" action="${pageContext.request.contextPath}/reg/upload.do" method="post" enctype="multipart/form-data" <span style="color:#ff0000;">target="hidden_frame"</span>>
	<span style="white-space:pre">	</span><input type="file" name="file" id="file" style="width:100%;"/>

<span style="white-space:pre">		<span id="error"></span></span><!---上传文件错误信息展示-->
<span style="white-space:pre">	</span></form>

2.上传文件的iframe

3.Controller文件上传返回的页面

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'attachment_iframe.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<script type="text/javascript">
		window.onload = function(){
			var error = document.getElementById("error").value;
			if(!error){
				parent.document.getElementById("confirmForm").submit();
			} else{
				parent.document.getElementById("error").innerHTML = "<font color='#f00'>*"+error+"</font>";
			}
		}
	</script>
  </head>
  
  <body>
    <input type="hidden" id="error" value="${requestScope.error}"/>
  </body>
</html>

通过在返回的中来进行错误信息的设置，来在上传页面进行上传错误信息的展示