[JS] FormData(폼데이터)에 대해 알아보자. ( FormData의 key, value값 확인하는 방법 및 FormData 함수)

파일 업로드를 정리하면서 formData안의 key, value값을 확인하는 방법이 있다는 걸 알아서 한번 정리 해본다.

 

FormData란??

- AJAX와 같은 비동기 서버통신을 통해 데이터를 업로드할 때 사용하는 Javascript 객체이다.

- HTML5의 form태그를 대신할 수 있는 객체이다.

- 페이지전환 없이 폼데이터를 전송하고 싶을 때 사용한다.

- 전송방식은 AJAX의 비동기방식을 이용하지만, 데이터포맷은 JSON이 아닌, form포맷이다.

 

사용방법 

 

1. FormData 객체 생성

var formData = new FormData();

2. FormData.append(key, value) : FormData 객체에 데이터 적재

formData.append('name','홍길동'); formData.append('age','18'); formData.append('sex','male');

3. FormData.get(key) : FormData 객체의 value값 추출

formData.get('name'); formData.get('age'); formData.get('sex');

4. FormData.delete(key) : FormData 객체의 필드 제거

formData.delete('name'); formData.delete('age'); formData.delete('sex');

5. FormData.has(key) : FormData 필드가 존재하면 true, 존재하지 않으면 false를 반환

formData.has('name'); formData.has('age'); formData.has('sex');

6. FormData 객체안 key값, value값 조회

for (let key of formData.keys()) { console.log(key); } for (let value of formData.values()) { console.log(value);}