[jQuery] input file을 form 데이터로 전송하는 방법

Spring 기반 웹 어플리케이션을 개발하면서 MultipartFile 형태로 파일을 전달 받고 싶은 경우가 있었다.

그 때 이 방법을 통해 file을 잘 전달 할 수 있었다. 

jsp 에서 ajax를 이용하여 form 데이터를 서버로 보내기까지의 과정을 간단하게 아래와 같이 기술한다. 

1. HTML

<form id="testForm"> 
  <input type="file" id="imageFile">
</form>

2. Javascript

- 버튼이 존재한다면 버튼을 작동 시키는 onclick 함수를 생성하여 아래와 같은 코드를 적절히 추가하여 사용하도록 한다.

- 서버로의 전송은 ajax를 사용하였다. 자세한 ajax의 옵션과 사용방법은 다음에 기술 할 예정이다. (공부할게 참 많다.)

var imageFile;

// 첨부파일을 변경할때 마다 실행되는 이벤트 
$("#image").on("change", function(event){
	imageFile = event.target.files[0];
});

var testForm = document.getElementById("testForm");

var formData = new FormData(testForm);

formData.append("imageFile", imageFile);

$.ajax({
    url: "서버로 전송할 url",
    async: true,
    type: "POST",
    data: formData,
    processData: false,
    contentType: false,
    dataType: "json",
    success: function(response) {
    	// 전송이 성공한 경우 받는 응답 처리
    },
    error: function(error) {
    	// 전송이 실패한 경우 받는 응답 처리
    }
});

3. Java

- 서버에서 데이터가 잘 전송 됐는지 로그를 찍어 확인 하는 코드만 추가하였다. 아래와 같이 전달 받을 클래스를 생성하여 변수 타입을 MultipartFile로 설정하고 form에서 전달하려는 변수명과 일치시켜주면 MultipartFile 형태로 첨부파일을 전달 받을 수 있다. 

// Domain

@Data
public class TestData {

  private MultipartFile imageFile;

}


// API Controller

@PostMapping("/upload")
public @ResponseBody Map upload(@ModelAttribute TestData testData) {
	
    log.debug("전달 받은 파라미터 ==> {}", testData);
    
    Map<String, String> result = new HashMap<String, String>();
    result.put("message", "업로드 성공");
    
    return result;
}