springMVC使用ajax实现文件上传

springMVC使用ajax实现文件上传

 

一、 上传之前的准备配置

1、 依赖jar包和 mvc.xml文件配置，参考连接： 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 中配置

<!-- 上传文件拦截，设置最大上传文件大小   10M=10*1024*1024(B)=10485760 bytes -->  
<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

 

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

<property name="maxUploadSize" value="【设置最大文件大小】" />

 

 

 

六、测试

 

 

 

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

 

 

 

 

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

 

                             SpringMVC文件上传下载代码