[JS] FormData 객체

 

* FormData  객체 

JS에서 제공하는 웹API로,

HTML 폼의 데이터를 key-value형태로 자동으로 수집하여 비동기 요청으로 서버에 전송하는 경우 사용.

(파일업로드를 지원하기 때문에 복합데이터(파일, 이미지 등)를 전송하는 경우 많이 사용.)

 

 

( FormData객체 생성 )

const formData = new FormData();

 

---

 

( 폼 데이터 )

<form>
  <input type="text" name="username" value="JohnDoe">
  <input type="email" name="email" value="john@example.com">
  <input type="file" name="profilePic">
</form>

 

( 폼 데이터를 FormData 객체에 추가 )

const formElement = document.querySelector('form');
const formData = new FormData(formElement);


for (let pair of formData.entries()) {
    console.log(pair[0] + ': ' + pair[1]);
}


//FormData 객체 내용 출력
username: JohnDoe
email: john@example.com
profilePic: [object File]  // 사용자가 선택한 파일

FormData 객체는 자동으로 폼의 name을 key값으로, value를 value값으로 한 객체를 생성한다. 

 

** FormData객체가 생성된 시점에 HTML요소들의 현재 상태(property)를 캡쳐해서 가져오기 때문에
객체 생성 이후 <form>의 변경사항이  formData에는 반영되지 않는다.
data의 변경이 필요한 경우 formData객체 자체를 가공해야 한다.

 

---

 

( ForData 메서드 )

 

* append(name, value) : 새로운 키-값 추가

formData.append('username', 'JohnDoe');
formData.append('file', fileInput.files[0]);

=> 기존 값이 있다면 뒤쪽에 추가.

 

* set(name, value) : 키-값 설정. (같은 이름에 대한 값은 덮어씀)

formData.set('username', 'JaneDoe');

 

* get(name)  : 키로 value값 가져오기.  //  getAll(name) : 키로 value값들 가져오기. (배열형태)

let username = formData.get('username');
let usernames = formData.getAll('username');

 

* delete(name) : 키-값 삭제.

formData.delete('username');

 

* has(name) : 키-값이 있는지 boolean으로 반환. 

formData.has('username');

 

* entries()  : 키-값 이터레이터로 반환.

const formData = new FormData(formElement);

for (let [key, value] of formData.entries()) {
    console.log(`FormData - Key: ${key}, Value: ${value}`);
}

=> FormData객체는 전송을 위한 객체로 단순 js객체와는 달라서 console.log(formData)로 값을 확인할 수 없다.*****

    for문과 entries(), keys(), values() 같은 이터레이션 메서드로 출력해야함!!

 

---

 

( fetch 전송 )

fetch('/submit-form', {
    method: 'POST',
    body: formData
}).then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

 

( ajax 전송 )

$.ajax({
    url: 'https://api.example.com/upload', // 요청할 URL
    method: 'POST', // HTTP 메서드
    enctype: 'multipart/form-data', // 폼 인코딩 타입
    data: formData, // FormData 객체 전달
    processData: false, // jQuery가 데이터를 쿼리 문자열로 변환하지 않도록 설정 (필수)
    contentType: false, // Content-Type 헤더 자동 설정 (multipart/form-data) (필수)
    success: function(response) {
        console.log('Success:', response); // 성공 시 실행되는 콜백
    },
    error: function(xhr, status, error) {
        console.error('Error:', error); // 에러 발생 시 실행되는 콜백
    }
});

 

 

---

 

(참고)

https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-FormData-%EC%A0%95%EB%A6%AC-fetch-api

🌐 FormData 사용법 & 응용 총정리 (+ fetch 전송)