ajax로 비동기 파일 전송 작업 중 Illegal invocation 에러가 뜨면서 파일이 넘어가지 않았다.
잘 짠 것 같은데 무슨 문제일까 뒤적뒤적 구글링 하다 보니, ajax 옵션 문제였다.
ajax로 파일 전송 시
- contentType : false
- processData: false
이렇게 두 가지 옵션을 주어야 하는데, contentType은 데이터 content-type의 헤더 값이다.
기본값으로 "application/x-www-form-urlencoded; charset=UTF-8" 설정되어있고, 파일 전송 시 "multipart/form-data" 전송될 수 있도록 false로 설정해 주어야 한다.
processData는 일반적으로 서버에 전달되는 데이터는 아래와 같이 query string 이라는 형태로 전달되고,
ex) http://example.com/over/there?title=Main_page&action=raw
data 파라미터로 전달된 데이터를 jQuery 내부적으로 query string 으로 만드는데, 파일 전송의 경우 이를 하지 않아야 하고 이를 설정하는 것이 processData: false 이다.
출처: https://repacat.tistory.com/38 [레파캣]