FormData 란? 그리고 사용법

개요

HTML form 과 값들을 표현하는 key/value 쌍의 집합을 쉽게 생성할 수 있는 방법을 제공하는 인터페이스이다. fetch() 혹은 XMLHttpRequest.send() 메서드에 전달하기 위해 사용될 수 있다. 인코딩 타입이 "multipart/form-data" 로 설정되었다면, form 이 전달하는 포맷을 동일하게 사용한다.

만일 form element 가 하는 방식으로 쿼리 파라미터를 만들어 간단한 GET 요청을 제출하고 싶다면, URLSearchParams 의 생성자에 직접 넘길 수 있다.

FormData 를 구현하는 오브젝트는 for...of 구조에서 직접 사용될 수 있다. 굳이 entries() 메서드를 한번 더 불러올 필요 없다. for (const p of myFormData) 와 for (const p of myFormData.entries()) 는 같다.

생성자

FormData 오브젝트 를 생성한다.

new FormData();
new FormData(form);

파라미터

form: HTML form element 이다. form 내부 HTML input element 의 name 과 value 를 통해 값을 생성해 넣는다. 파일이 들어온 경우는 인코딩한다.

예제

빈 FormData 만들어서 데이터 넣기

const formData = new FormData();
formData.append("username", "Chris");

HTML form element 이용하기

<form id="form">
  <input type="text" name="text1" value="foo" />
  <input type="text" name="text2" value="bar" />
  <input type="text" name="text2" value="baz" />
  <input type="checkbox" name="check" checked disabled />
</form>

<output id="output"></output>

const form = document.getElementById("form");
const formData = new FormData(form);

const output = document.getElementById("output");

for (const [key, value] of formData) {
  output.textContent += `${key}: ${value}\n`;
}

결과로 <output></output> 태그 내부에 form 에 입력된 key/value 가 텍스트로 추가된다.