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

柔光的暖阳◎ 2022-01-23 03:29 311阅读 0赞

现在项目用的最多的框架是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数据 ##

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);
    	}
    }