springMVC使用ajax实现文件上传

╰+哭是因爲堅強的太久メ 2022-06-01 08:49 266阅读 0赞

### 一、 上传之前的准备配置 ###

1、 依赖jar包和 mvc.xml文件配置，参考连接： [ https://www.cnblogs.com/WJ-163/p/6269409.html][https_www.cnblogs.com_WJ-163_p_6269409.html]

2、 两个jar包

a. commons-io-2.4.jar 
    b. commons-fileupload-1.3.1.jar

3、一个 springmvc.xml 中配置

<bean id="multipartResolver"  	
    class="org.springframework.web.multipart.commons.CommonsMultipartResolver">  
    		<property name="maxUploadSize" value="10485760 " />   
    	</bean>

### 二、 前端html 代码 ###

<center>
    		<h1>论文导入页面</h1>
    		<form action="${ctx}/executeImport" method="post" enctype="multipart/form-data">	
    			<input type="file" name="articleFile" class="required" id="articleFile"><br>
    			<button id="btn_import" onclick="return false"> 导入 </button> <br><br>
    		</form>	
    	</center>

### 三、js ajax 代码 ###

$("#btn_import").click(function(){
    	//避免重复点击,上传多次文件
    	$("button").attr("disabled","disabled");
    	var formData=new FormData();
    	formData.append("articleFile",$("#articleFile")[0].files[0]);
    	$.ajax({
    		url:'${ctx}/executeImport',
    		type:'post',
    		data:formData,
    		contentType:false,
    		processData:false,
    		cache:false,
    		success:function(data){
    window.location.href='${ctx}/importArticle';
    		}
    	});
    });

### 四、后台java 代码 ###

1、 进入上传 页面
    @RequestMapping(value={"/importArticle","/importArticle.html"})
    	public String importArticle(){
    		return "importArticle";
    	}

2、执行上传操作
      @RequestMapping(value={"/executeImport"},method=RequestMethod.POST)
    		@ResponseBody
    		public String executeImport(MultipartFile articleFile) throws Exception{
    		String originalFilename = articleFile.getOriginalFilename();
    		File file=new File("C:/"+originalFilename);
    		try {
    			articleFile.transferTo(file);
    			return "true";
    		} catch (Exception e) {
    			e.printStackTrace();
    		}
    		return "false";
    		}

### 五、可能遇到的问题 ###

1、The current request is not a multipart request： [ http://blog.csdn.net/haha\_sir/article/details/79131607][http_blog.csdn.net_haha_sir_article_details_79131607]

2、 the request was rejected because its size (46066029) exceeds the configured maximum (10485760)： 上传文件大小，超过了springmvc设置的最大文件大小。 解决： a.换小文件上传; b. 调整限定最大文件大小。

### 六、测试 ###

![SouthEast][]

![SouthEast 1][]

以上即可实现利用ajax来上传文件，当然这可能是最原始简单版的。 现在大多用插件来实现上传了。 如： [ webuploader][webuploader]  ， [ jQuery.upload][jQuery.upload]  。 不过呢，万变不离其宗，只要掌握了原理，用上插件对于您来说，更是如虎添翼啦。

参考资料：三、js ajax 代码： [FormData属性理解][FormData]

[SpringMVC文件上传下载代码][SpringMVC]

[https_www.cnblogs.com_WJ-163_p_6269409.html]: https://www.cnblogs.com/WJ-163/p/6269409.html
[http_blog.csdn.net_haha_sir_article_details_79131607]: http://blog.csdn.net/haha_sir/article/details/79131607
[SouthEast]: /images/20220601/ff0ff8129b5e43019d378851f6fe4caf.png
[SouthEast 1]: /images/20220601/87b9a534b8db4962ab4f4490ac5b9edf.png
[webuploader]: http://fex.baidu.com/webuploader/
[jQuery.upload]: http://www.jq22.com/jquery-info230
[FormData]: https://segmentfault.com/a/1190000006716454
[SpringMVC]: https://gitee.com/RunCoder/spring-mvc-tourist/tree/fileupload/