파일업로드와 Ajax 옵션

• 파일업로드 Ajax 방식은 브라우저에서 지원하는 클래스인 FormData를 이용하는 것
• FormData는 <form>처럼 key/value가 저장되어 데이터를 처리할 수 있다.

var data = new FormData();
data.append('file', file);
$.ajax({
    data: data,
    type: 'post',
    url: '/url',
    dataType: 'text',
    contentType: false,
    processData: false,
    success: function(res) {
        
    }
});

• ForData에 파일 정보를 append()를 통해 key/value 형식으로 넣는다.
• dataType : 보내는 데이터 타입이 아니라 서버가 응답할 때 보내줄 데이터 타입. success function에 전달될 argument의 형태를 지정하는 데 사용된다.
• contentType : default 값은 "application/x-www-form-urlencoded; charset=UTF-8", "multipart/form-data"로 전송되도록 false 설정. 명시적으로 "multipart/form-data"으로 설정해주면 boundary string이 안 들어가 제대로 동작하지 않는다.
  • boundary string : 브라우저에서 넣어주는 전송되는 데이터 영역을 구분해주는 구분자
• processData : 일반적으로 서버에 전달되는 데이터는 query string 형태이다.
  • ex : http://example.com?title=tit&content=cont
• data 파라미터로 전달된 데이터를 jQuery 내부적으로 query string 형태로 만드는 데, 파일 전송의 경우 이를 하지 않아야하므로 processData를 false로 설정

참고

[파일업로드] Ajax 방식