SpringMVC下实现Ajax提交包含文件上传（input type=file）子标签的form表单数据

1. 前端核心代码

<form id="reqForm">
	姓名：<input type="text" name="uname"><br>
	年龄：<input type="text" name="age"><br>
	头像：<input type="file" name="icon"><br>
	<input type="button" id="btn" value="提交">
</form>
<script src="js/jquery.min.js"></script>
<script>
	//页面加载
	$(function(){
		//给按钮添加单击事件
		$("#btn").click(function(){
			//获取表格数据（原生js）
			var reqData=new FormData(doucment.getElementById("reqForm"));
			//也可以使用ajax方式获取表格数据，但要注意不能使用var reqData=new FormData($("#reqForm"))
			//因为$("#reqForm")返回的是数组对象，因此要使用一下方式
			//var reqData=new FormData($("#reqForm")[0]);
			
			//发起请求
			$.ajax({
				url:"reqTest",//请求路径
				type:"post",//请求方式
				data:reqData,//请求数据
				processData:false,//是否将请求数据转换为对象
				contentType:false,//发送数据到服务器时所使用的内容类型，false表示不需要ajax处理
				//请求成功时运行
				success:function(){
					alert("提交成功");
				},
				//请求失败时运行
				error:function(){
					alert("提交失败");
				}
			})
		})
	})
</script>

2. 后端核心代码

1. 在SpringMVC的配置文件中配置上传文件解析bean

   <bean id="mulitpartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"></bean>
   

2. 请求的单元方法

   @RequestMapping("reqTest")
   public void Test(String uname,String age,MultipartFile icon){
   	//获取文件名
   	String fileName=icon.getOriginalFileName();
   	//创建文件存储路径
   	String filePath="c:/upload";
   	//存储上传的文件
   	icon.transferTo(new File(filePath,fileName));
   }