FormData

FormData는 form 필드, 그 값을 나타내는 key, value 쌍을 쉽게 생성할 수 있도록 해준다. 또한 XMLHttpRequest.send() 메서드를 사용해서 쉽게 전송할 수도 있다. 인코딩 타입이 Content-Type: multipart/form-data로 설정된 경우, form에서 사용하는 것과 동일한 포맷을 사용해야 한다.

FormData를 구현하는 객체에는 entries()가 있지만, for..of 구조를 사용할 수도 있다. 아래의 두 코드는 같다.

// entries 이용하기
for (var p of myFormData.entries())
  
// for .. of 이용하기
for (var p of myFormData)

construtor

새로운 FormData 객체를 생성한다.

let formData = new FormData([form]);

• form: 해당 파라미터는 optional하다. 지정된 경우 FormData 객체는 HTML <form>의 현재 key, value 값들로 채워진다.

위의 파라미터는 optional하므로 값을 주지 않을 경우 빈 FormData 객체가 생성되고, 값을 줄 경우 해당 form과 관련된 값들로 채워진다.

// 1. 빈 FormData 객체 생성
let formData = new FormData();

// HTML form
<form id="joinForm" name="joinForm">
  <div>
    <label for="username">Enter name:</label>
    <input type="text" id="username" name="username">
  </div>
  <div>
    <label for="usergender">Enter your gender:</label>
    <input type="text" id="usergender" name="usergender">
  </div>
  <div>
    <label for="userfile">:Upload your image file</label>
    <input type="file" id="userfile" name="userfile">
  </div>
<input type="submit" value="Submit!">
</form>

// HTML의 form 값들로 채워짐 
let joinForm = document.getElementById('joinForm');
formData = new FormData(joinForm);

Method

FormData.append()

FormData 객체의 기존 key에 새 value를 추가하거나, key가 없는 경우 key를 추가한다.

🙄FormData.set()과 FormData.append()의 차이점
지정된 key가 있으면 FormData.set()은 모든 기존 값에 새 값으로 덮어쓰기를하지만, FormData.append()는 기존 값 집합의 끝에 새로운 값을 추가한다.

Syntax

formData.append(name, value, [filename]);

• name: value에 포함되는 데이터 필드의 이름
• value: 필드의 값으로, String 또는 Blob일 수 있음
• filename(optional): 두번째 매개변수로 Blob또는 File이 전달될 때, 서버서 보내는 파일 이름이다.

returns

void

FormData.delete()

FormData 객체에서 key와 그 값에 해당하는 value를 지운다.

Syntax

formData.delete(name);

• name: 삭제할 key의 이름

returns

void

FormData.entries()

이 객체에 담긴 모든 key, value 쌍을 순회하는 iterator를 반환한다.

Syntax

formData.entries();

returns

iterator

FormData.get()

FormData 객체 내의 값들 중, 주어진 key와 연관된 첫번째 값을 반환한다.

Syntax

formData.get(name);

• name: 검색하고 싶은 키의 이름을 나타내는 USVString

returns

값을 포함하는 FormDataEntryValue

FormData.getAll()

FormData 객체 내의 값들 중, 주어진 key와 연관된 모든 값이 담긴 배열을 반환한다.

Syntax

formData.getAll(name);

• name: 검색하고 싶은 키의 이름을 나타내는 USVString

returns

FormDataEntryValue의 배열

FormData.has()

FormData 객체에 특정 key가 포함되어 있는지 여부를 나타내는 boolean(true, false)을 반환한다.

Syntax

formData.has(name);

• name: 찾고자하는 키의 이름을 나타내는 USVString

returns

Boolean

FormData.keys()

이 객체에 담긴 모든 key, value 쌍들의 모든 key들을 돌 수 있는 iterator를 반환한다.

Syntax

formData.keys();

returns

iterator

FormData.set()

FormData 객체 내에 있는 기존 key에 새 value를 설정하거나, 존재하지 않을 경우 key, value 쌍을 추가한다.

Syntax

formData.set(name, value, [filename]);

• name: value에 포함되는 데이터 필드의 이름
• value: 필드의 값으로, String 또는 Blob일 수 있음
• filename(optional): 두번째 매개변수로 Blob또는 File이 전달될 때, 서버서 보내는 파일 이름이다.

FormData.values()

이 객체에 포함된 모든 value를 통과하는 iterator를 반환한다.

Syntax

formData.values();

returns

iterator