使用$.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);
 }
}

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

1.上传文件

2.上传List数据

浏览过的版块