FormData

FormData란

AJAX로 폼 전송을 가능하게 해주는 객체이다. 이러한 경우는 파일 업로드일 경우 사용한다. 예를 들어,사람인에서 이력서 작성 시 이미지 업로드를 하고 프로젝트 했던 자료들을 올리려고 할 때 압축파일을 올릴 수도 있는데 이때, 업로드한 파일(이미지,압축파일 등)을 서버에게 전송할 수 있도록 하는 객체가 FormData이다.

사용 방법

append : 값 추가

const formData = new FormData(); // 객체 생성
formData.append("name","bsy"); // 키-값 형식으로 formData에 추가, 여러개 추가 가능
formData.append("name","kimcoding"); 

has, get, getAll : 값 확인하기

formData.has("name") // true
formData.get("name") // bsy, 처음 지정한 값만 가져온다.
formData.getAll("name") // ["bsy","kimcoding"]

delete : 값 삭제

formData.delete("name") 
formData.get("name") // null

FormData는 <input type="file">과 같이 사용해 form을 통해서 업로드합니다. 사용자가 파일을 읽어 와서 선택하고 선택한 파일을 FormData에 담아준 후에 제출 시 event.preventDefault()로 페이지 전환 없이 AJAX로 전송한다. AJAX 전송 시 "Content-Type : multipart/form-data"이여야 한다.