[js] FormData()

gillog·2021년 6월 17일
0

javascript

목록 보기
6/6

🙆‍♂️ import 🙇‍♂️

FormData()[MDN Web Docs]


FormData

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

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

key으로는 해당 formsubmit한 요소들name을 사용한다.

value으로는 해당 formsubmit한 요소들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로 사용된다.

filenameOptionalfile 전달 시 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로 사용된다.

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

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

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

.delete()

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

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

gilFormData.delete('keyName');

.entries()

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

각 쌍의 KeyUSVString Type이고, ValueUSVString 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를 반환한다.

만약 해당 KeyValue가 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에 포함된 모든 KeyIterator를 반환한다.

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에 포함된 모든 ValueIterator를 반환 한다.

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
profile
🚀 기록보단 길록을 ⭐

0개의 댓글