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 中配置

二、 前端html 代码

		
论文导入页面
		
	
			

			 导入  


		
	
	

三、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. 调整限定最大文件大小。

六、测试

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

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