[Spring] ajax 비동기 파일 폼 데이터 전송

파일이 여기서 선택되면 비동기로 컨트롤러에 보내주고 응답까지 받는다

	<p><input type="file" id="inputFile" /></p>

	$("#inputFile").on("change",function(event){
		console.log("change!!");
		
		let userId = $("#userId").val();
		let password = $("#password").val();
		
		//event.target : <input type="file"....
		let files = event.target.files;
		let file = files[0];
		
		console.log("files : ", files);
		console.log("file : ", file);
		
		//formData : <form></form>
		let formData = new FormData();

		formData.append("userId", userId);
		formData.append("password", password);
		formData.append("file", file);
		
		$.ajax({
			url:"/uploadAjax",
			processData:false,
			contentType:false,
			data:formData,
			type:"post",
			dataType:"text",
			success:function(result){
				console.log("result : ", result);
				alert(result);
			}
		})
	});

files는 FileList로 0번째에 File 1번째에 길이가 들어가있다

	@ResponseBody
	@PostMapping("/uploadAjax")
	public Map<String, Object> uploadAjax(String userId, String password, MultipartFile file) {
		String fileName = file.getOriginalFilename();
		
		log.info("userId : " + userId);
		log.info("password : " + password);
		log.info("fileName : " + fileName);
		
		Map<String, Object> map = new HashMap<String, Object>();
		map.put("userId", userId);
		map.put("password", password);
		map.put("fileName", fileName);
		
		return map;
	}

 

json 객체 타입을 보낸게 아니라서 @requestBody는 안붙인것같다..