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

ゝ一世哀愁。 2022-08-13 07:00 218阅读 0赞

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

一、.spring mvc文件上传配置

1.文件上传解析器配置

<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
    		
    		<property name="maxUploadSize">10240</property>
    		<property name="defaultEncoding">UTF-8</property>
    	</bean>

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

<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%;"/>

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>

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