使用$.ajax上传文件、上传List数组

现在项目用的最多的框架是spring boot框架，在该框架下如何使用$.ajax上传文件、上传列表，下面会通过示例代码来说明。

1.上传文件

//js创建Form表单
var userFormData = new FormData();
//将页面中的Form表单中的数据放入userFormData中
/**
dataModelForm表单内容
<form id="dataModalForm">
	<input type="hidden" name="userId" value="0000001"></input>
	<input type="text" name="userName" value="李四"></input>
	<select name="text">
		<option value="">-请选择-</option>
		<option value="male" selected>男</option>
		<option value="female"></option>
	</select>
	<textarea name="descripton" row="5">描述</textarea>
	<input type="file" name="profileDoc"></input>
</form>
*/
var userArr = $("dataModalForm").seializeArray();
for( i in userArr ){
	//防止中文乱码
	userFormData.append(userArr[i].name,encodeURI(userArr[i].value);
}
$.ajax({
	url:'http://localhost:8080/myProject/saveUser',
	method:'POST',
	//提交的时候不会序列化userFormData，而是直接使用userFormData
	processData:false,
	//不设置contentType类型，避免jQuery对Ajax封装，使提交的时候失去变量间的分割符
	//分隔符类似如：Content-Type: multipart/form-data; boundary=uwYCf43a7aa122d93ab066dc
	contentType:false,
	data:userFormData,
	success:function(res){
		alert("保存成功");
	},
	error:function(res){
	}
});

@RequestMapping(value="saveUser")
public String saveUser(UserEntity user,MultipartHttpServletRequest request) throw Excetpion{
	//防止中文乱码
	URLDecodeUtil.beanURLDecode(user);
	for(Entry<String,String> elem:filePathMap.entrySet()){
		MultipartFile mulitiFile = request.getFile(elem.getKey());
		String rootPath = UserController.class.getClass().getResource("/").getPath()+"/file/":
		SimpleDateFormat sdf = new simpleDateFormat("yyyyMMddHHmmssSS");
		String filename = elem.getKey()+".jpg");
		String filePath = rootPath + fileName;
		File file = new File(filePath);
		if(!file.getParentFile().exists()){	
			file.getParentFile().mkdirs();
		}
		multiFile.transferTo(file);
		user.setProfileDoc("/file/"+fileName);
	}
	//业务层保存用户信息
	userService.saveUser(user);
}

2.上传List数据

var project = {
	projectId:"",
	projectName:""
};
var projectRelatedPersons = [{
	userId:"",
	userName:"",
	relation:"项目经理",
},{
	userId:"",
	userName:"",
	relation:"项目监理",
},{
	userId:"",
	userName:"",
	relation:"项目成员",
}];
$.ajax({
	url:"http://localhost:8080/myProject/save",
	method:"POST",
	data:JSON.stringify({
		project:project,
		projectRelatedPersonList:projectRelatedPersons
	}),
	contentType:"application/json;charset=utf-8",
	success:function(res){
		alert("success")
	}
});

public class ProjectVO{
	private projectEntity project;
	private List<ProjectRelatedPerson> projectRelatedPersonList;
	//属性get、set方法
	......
}

@RestController("/")
public class ProjectController{
	@RequestMapping(value="save")
	public String save(@RequestBody ProjectVO projectVO) throw Exception{
		//相关的信息保存
		this.projectService.save(projectVO);
	}
}