[js] FormData()

GilLog·2021년 6월 17일

JavaScript formData

javascript

목록 보기

6/7

🙆‍♂️ import 🙇‍♂️

FormData()[MDN Web Docs]

FormData

var gilFormData = new FormData(document.getElementById('formId'));

FormData는 Parameter로 HTML의 <form> 태그 요소의 id를 받으면,
해당 form의 현재 key와 value들로 Data가 채워진다.

key 값으로는 해당 form을 submit한 요소들의 name을 사용한다.

value 값으로는 해당 form을 submit한 요소들의 value를 사용한다.

보통 아래와 같은 형식으로 사용된다.

<form id="gilForm" name="gilForm">
  <div>
    <input type="text" name="name" value="gil">
  </div>
  <div>
    <input type="text" name="acc" value="seoul">
  </div>
  <div>
    <input type="file" name="file">
  </div>
  <input type="submit" value="Submit!">
</form>

var gilForm = document.getElementById('formId');
var gilFormData = new FormData(gilForm);

Methods

.set()

.set()은 FormData 객체내에 기존 Key에 새로운 Value를 설정하거나,
Key가 없는 경우 새로운 Key와 함께 Value를 추가한다.

FormData.append()와 다른 점은 .set()은 기존 Key가 존재할 경우 모든 기존 Value를 새로운 Value로 덮어씌우지만,

.append()는 기존 Value 집합의 끝에 새로운 Value를 추가한다.

var gilFormData = new FormData(document.getElementById('formId'));

gilFormData.set("newKey", "1");
gilFormData.set("alreadyKey", "11");
gilFormData.set("alreadyKey", "22");

// gilFormData.get("newKey") == 1
// gilFormData.get("alreadyKey") == 22

parameter

.set()는 parameter로 name, value, _filename을 받을 수 있다.

name, value는 각각 Key, Value로 사용된다.

filename은 Optional로 file 전달 시 File 객체의 기본 파일 이름을 지정하는 용도로 사용된다.
Blob객체의 기본 파일 이름은 blob

var gilFormData = new FormData(document.getElementById('formId'));

gilFormData.set('gilFile', gilFileInput.files[0], 'gil.png');

.append()

.append()는 기존 FormData 객체 기존 Key에 새로운 Value를 추가하거나,
Key가 없는 경우 새로운 Key와 함께 Value를 추가한다.

FormData.set() 과 다른 점은 .set()은 기존 Key가 존재할 경우 모든 기존 Value를 새로운 Value로 덮어씌우지만,

.append()는 기존 Value 집합의 끝에 새로운 Value를 추가한다.

var gilFormData = new FormData(document.getElementById('formId'));

gilFormData.append("newKey", "1");
gilFormData.append("alreadyKey", "11");
gilFormData.append("alreadyKey", "22");

// gilFormData.get("newKey") == 1
// gilFormData.get("alreadyKey") == ['11', '22']

parameter

.append()는 parameter로 name, value, _filename을 받을 수 있다.

name, value는 각각 Key, Value로 사용된다.

filename은 Optional로 file 전달 시 File 객체의 기본 파일 이름을 지정하는 용도로 사용된다.
Blob객체의 기본 파일 이름은 blob

var gilFormData = new FormData(document.getElementById('formId'));

gilFormData.append('gilFile', gilFileInput.files[0], 'gil.png');

.delete()

.delete()는 FormData 객체에서 Key값을 통해 Key와 Value를 삭제한다.

var gilFormData = new FormData(document.getElementById('formId'));

gilFormData.delete('keyName');

.entries()

.entries()는 해당 FormData 객체에 포함된 모든 Key, Value 쌍을 iterator로 반환한다.

각 쌍의 Key는 USVString Type이고, Value는 USVString Type 이거나 Blob이다.
USVString은 유니코드 스칼라 값의 모든 가능한 시퀀스 집합
JavaScript로 전달될 땐 String으로 Mapping 됨

var gilFormData = new FormData(document.getElementById('formId'));

gilFormData.append('gil1', 'log1');
gilFormData.append('gillog1', 'loggil1');

for(var pair of formData.entries()) {
   console.log(pair[0]+ ', '+ pair[1]);
}
// gil1, log1
// gillog1, loggil1

.get()

.get()는 FormData에 포함된 Key값의 Value를 반환한다.

만약 해당 Key에 Value가 2개 이상이라면, 첫 번째 Value만 반환한다.

var gilFormData = new FormData(document.getElementById('formId'));

gilFormData.append('gillog', 'useful');
gilFormData.append('gillog', 'good');

gilFormData.get('gillog');
// useful

.getAll()

.getAll()은 FormData 객체에 포함된 지정된 Key와 관련된 모든 Value를 반환한다.

var gilFormData = new FormData(document.getElementById('formId'));

gilFormData.append('gillog', 'useful');
gilFormData.append('gillog', 'good');

gilFormData.getAll('gillog');
// ['useful', 'good']

.has()

.has()는 FormData에 특정 Key가 포함되어있는지 여부를 boolean으로 반환한다.

var gilFormData = new FormData(document.getElementById('formId'));

gilFormData.append('gil', 'useful');
gilFormData.append('log', 'good');

// true
gilFormData.has('gil');

// false
gilFormData.has('gillog');

.keys()

.keys()는 FormData에 포함된 모든 Key의 Iterator를 반환한다.

var gilFormData = new FormData(document.getElementById('formId'));

gilFormData.append('gil', 'useful');
gilFormData.append('log', 'good');
gilFormData.append('gillog', 'so useful and good');

for (var key of gilFormData.keys()) {
   console.log(key);
}

// gil
// log
// gillog

.values()

.values()는 FormData에 포함된 모든 Value의 Iterator를 반환 한다.

var gilFormData = new FormData(document.getElementById('formId'));

gilFormData.append('gil', 'useful');
gilFormData.append('log', 'good');
gilFormData.append('gillog', 'so useful and good');

for (var key of gilFormData.values()) {
   console.log(key);
}

// useful
// good
// so useful and good