<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!');
  },
});

왜?!!?!??! 되는것인지?!?!?!?!? :

ProcessData란?

AJAX 통신에서 일반적으로 서버에 전달되는 데이터는 query string 형태이다.
ex) http://example.com?title=tit&content=cont
data 파라미터로 전달된 데이터를 jQuery 내부적으로 query string 형태로 만드는 데, 파일 전송의 경우 이를 하지 않아야하므로 processData를 false 로 설정

contentType 란?

보내는 데이터의 타입을 의미한다. 기본값은 application/x-www-form-urlencoded 이고, 흔히는 application/json; charset-utf-8 이 쓰인다. 기본 타입으로는 파일이 전송 안되기 때문에 false 로 설정

따라서 AJAX 통신을 통해 파일을 전달하기 위해서는 위 2가지 파라미터를 적절한 값으로 변경해주어야 정상적인 통신과 파일 전달이 가능하다