FormData 란?

 

FormData 

 

브라우저에서 제공하는 내장 API로, 폼 데이터를 쉽게 다루고 서버에 보내도록 도와주는 객체이다.
즉, FormData란? HTML이 아닌 JavaScript에서 폼 데이터를 다루는 객체라고 생각하면 된다.
( FormData 객체는 HTML 폼데이터를 나타낸다 → 생성자 : let formData = new FormData([form]); )

 

---

 

주요 특징

• HTML의 폼 데이터 처리 :
  • FormData는 HTML 폼에서 테이터를 추출하여 JavaScript로 다룰수 있도록 도와준다. 
  • HTML <form>태그를 사용해 데이터를 전송(submit)하는 대신, JavaScript를 통해 데이터를 서버로 보낼 수 있다.
• 유연한 데이터 추가 :
  • FormData 객체는 HTML <form> 태그의 모든 입력  데이터를 자동으로 수집 할 수 있으며, JavaScript로 데이터 추가,수정이 가능하다.
  • FormData는 텍스트뿐만 아니라 파일도 쉽게 서버로 전송할 수 있도록 해준다.
• Ajax를 통한 서버 전송 :
  • FormData는 폼 데이터를 자동으로 인코딩하여 서버로 보낼 수 있게 해준다.
  • 특히 enctype="multipart/form-data"와 같은 복잡한 인코딩 방식도 자동으로 처리해주기 때문에, 파일 업로드가 간편해진다.
  • 일반적인 HTML 폼 제출 방식에서는 <form>의 submit 동작을 통해 데이터를 서버로 보내지만, FormData 객체를 사용하면 이 동작을 Ajax와 같은 비동기 통신방식으로 대체할 수 있어 페이지를 새로고침하지 않고 데이터 전송이 가능하다.

 

---

 

주요 메서드

• new FormData() : 새로운 FormData 객체를 생성. ☞ 폼 요소를 전달하면 해당 폼의 데이터를 자동으로 수집한다.
• .append(name, value) : 폼 데이터에 새 데이터를 추가
• .append(name, blob, fileName) : <input type="file">형태의 필드를 추가. 세 번째 인수 fileName은 (필드 이름이 아니고) 사용자가 해당 이름을 가진 파일을 폼에 추가한 것처럼 설정해줌
• .set(name, value) : 특정 필드의 값을 설정하거나 기존 값을 덮어씀
• .get(name) : name에 해당하는 필드의 값을 가져옴
• .getAll(name) : name에 해당하는 이름을 가진 모든 값을 배열로 가져옴
• .has(name) : name에 해당하는 필드가 있으면 true를, 그렇지 않으면 false를 반환
• .delete(name) : name에 해당하는 필드를 삭제

 

---

 

 

* 간단한 폼 전송 예시

 

// +++ 간단한 폼 전송하기 +++
<form id="formElem">
  <input type="text" name="name" value="Bora">
  <input type="text" name="surname" value="Lee">
  <input type="submit">
</form>

<script>
  formElem.onsubmit = async (e) => {
    e.preventDefault();

    let response = await fetch('/article/formdata/post/user', {
      method: 'POST',
      body: new FormData(formElem)
    });

    let result = await response.json();

    alert(result.message);
  };
</script>


// +++ 폼 데이터 필드에 반복 작업 (for .. of) +++

let formData = new FormData();
formData.append('key1', 'value1');
formData.append('key2', 'value2');

// key/value 쌍이 담긴 리스트
for(let [name, value] of formData) {
  alert(`${name} = ${value}`); // key1 = value1, then key2 = value2
}

 

 

 

 

 

 

 

 

 

* 참고 : https://ko.javascript.info/formdata#ref-39

FormData 객체