<input type="file" class="swal2-input-file" name="cfile" id="cfile">
파일을 받아서 AJAX로 이를 넘기려는 상황에 Uncaught TypeError: Illegal invocation
오류가 발생!
const formData = new FormData();
formData.append('cfile', $('#cfile')[0].files[0]);
FormData 를 생성하여 파일 값을 넣어주고, AJAX 통신 시 contentType
, processData
파라미터를 false 로 지정하여 통신 시 오류 없이 매끄럽게 간다~!
$.ajax({
url: url,
type: 'POST',
data: formData,
contentType: false,
processData: false,
success: function (res) {
alert('success!');
},
});
AJAX 통신에서 일반적으로 서버에 전달되는 데이터는 query string 형태이다.
ex) http://example.com?title=tit&content=cont
data 파라미터로 전달된 데이터를 jQuery 내부적으로 query string 형태로 만드는 데, 파일 전송의 경우 이를 하지 않아야하므로 processData
를 false 로 설정
보내는 데이터의 타입을 의미한다. 기본값은 application/x-www-form-urlencoded
이고, 흔히는 application/json; charset-utf-8
이 쓰인다. 기본 타입으로는 파일이 전송 안되기 때문에 false 로 설정