FormData

AJAX로 폼 전송을 가능케해주는 FormData 객체에 대해 알아보겠습니다.

보통은 AJAX로 폼(form 태그) 전송을 할 일이 거의 없습니다. 주로 JSON 구조로 키-값 데이터를 전송하니까요. 하지만 폼 전송이 필요한 경우가 있습니다. 바로 이미지를 AJAX로 업로드할 경우입니다. 물론 이미지는 base64나, buffer, 이진 데이터 형식으로 서버로 전송해도 됩니다. 하지만 가장 자연스러운 것은 폼을 통해서 업로드하는 것이죠. input[type=file]을 사용해서요.

그런데 폼과 AJAX를 같이 쓴다는 것은 좀 이상하죠? 보통 폼 하면 제출 버튼을 누르면 action 속성에 지정한 페이지로 이동하면서 데이터를 전송하니까요. AJAX는 반대로 제출 버튼을 누르면 기본 폼 동작은 e.preventDefault()로 멈추고, 페이지 전환 없이 데이터를 전송합니다.

페이지 전환 없이 폼 데이터를 제출하고 싶을 때 바로 FormData 객체를 사용합니다. AJAX 전송법은 다음 시간에 알아보고, 이번 시간에는 이 객체에 대해서 자세히 살펴보겠습니다.

출처 : https://www.zerocho.com/category/HTML&DOM/post/59465380f2c7fb0018a1a263