FormData 사용하기

2023. 12. 6. 00:50·Frontend/JavaScript & Jquery

Form Submit하는건 프론트엔드 하면서 많이 하는 일 중에 하나일 것이다.

일단 Form Submit하는 방식은 여러가지가 있는데 내가 아는 것만 적자면...

1. form태그 안에 submit 버튼을 이용한 방식
2. 스크립트를 이용한 form.submit()
3. 비동기 통신을 이용한 submit 방식

 

그 외 등등 다양한 방식으로 form submit을 할 수 있다.

내가 짜는 코드에 맞게 적절한 방식으로 사용하면된다.

1번과 2번 케이스 경우에는 알아서 name과 value값을 백단으로 넘겨주지만

비동기 통신을 이용했을 때는 내가 직접 데이터를 말아서(?) 보내줘야한다.

 

어떻게 데이터를 말아서 보내야할까?

그것도 다양한 방식이 있지만 오늘은 FormData를 이용해서 데이터를 말아보겠다.

FormData 만들기

const formData = new FormData();

 

formData는 new 키워드를 이용해 만들어 줘야한다.

formData는 1개의 파라미터를 가진다. (optional)

<form name="frm" method="POST">
	<input type="text" name="name" />
</form>

위에 form 태그를 먼저 찾아야한다.

// 폼요소 찾는 2가지 방법
// 1. document.forms.[form이름];
const form = document.forms.frm
// 2. querySelector
const form2 = document.querySelector('[name=[form이름]]');

const formData = new FormData(form);

form 요소를 파라미터로 넣게 되면 해당 폼 요소의 필드 전체가 자동 반영된다.


FormData 메서드 (append)

// formData.append(key, value);

formData.append('age', 0);
formData.append('name', 'jane');

name(key)과 value를 가진 폼 필드를 추가해준다.

2-1. 파일을 append 하는방법 (파일이 1개일 때)

<input type="file" name="file" />

const fileData = document.querySelector('[name=file]').files[0];

formData.append('file', fileData);

file input의 files 속성의 array에서 [0]값을 폼 필드에 추가해준다.

2-2. 파일 여러개를 append 하는 방법 (multiple)

<input type="file" name="files" multiple />

const fileData = document.querySelector('[name=file]').files;

for (let i = 0; i < fileData.length; i++) {
    formData.append('files', fileData[i]);
}

 


FormData 쿼리 스트링으로 만드는 방법

const formData = new FormData();
formData.appent('test', 'test');

const queryString = new URLSearchParams(formData).toString();

URLSearchParams와 toString api를 사용하면 formData도 쿼리스트링으로 바꿀 수 있다.


FormData 출력하기

const formData = new FormData();

console.log(formData); // 출력 할 수 없음 FormData {}

for (var pair of formData.entries()) {
  console.log(pair[0] + ", " + pair[1]);
}

// 구조분해할당 이용하기
for (var [key, value] of formData.entries()) {
  console.log(key + ", " + value);
}

Object → FomData로 바꾸기

const person = {
	name : '홍길동',
    age : '21'
}

const formData = new FormData();
Object.entries(person).forEach(([key, value]) => {
	formData.append(key, value);
})

FomData → Object로 바꾸기

// formData

const object = {};

formData.forEach((value, key) => {
	object[key] = value
})

 

 


📌 참고자료

 

FormData 객체

 

ko.javascript.info

 

반응형

'Frontend > JavaScript & Jquery' 카테고리의 다른 글

[JS문법] null과 undefined  (0) 2024.07.13
[console Tip] console 유용하게 사용하기  (0) 2024.07.10
이벤트 버블링과 캡쳐링 이해하기  (1) 2023.11.25
[JS, Jquery] 요소의 속성, 프로퍼티 값  (0) 2023.03.07
[JS 디자인패턴] 전략패턴 (Strategy Pattern)  (1) 2023.03.01
'Frontend/JavaScript & Jquery' 카테고리의 다른 글
  • [JS문법] null과 undefined
  • [console Tip] console 유용하게 사용하기
  • 이벤트 버블링과 캡쳐링 이해하기
  • [JS, Jquery] 요소의 속성, 프로퍼티 값
전예방
전예방
  • 전예방
    예방이의 개발일기
    전예방
  • 전체
    오늘
    어제
    • All (125)
      • Info & Tip (2)
      • 유용한 사이트들 (5)
      • Mark Up & StyleSheet (23)
        • HTML (6)
        • CSS & SCSS (10)
        • 반응형 (6)
      • Frontend (66)
        • 전체 (10)
        • JavaScript & Jquery (18)
        • TypeScript (0)
        • React (26)
        • Next.js (3)
        • 성능최적화 (2)
        • 웹접근성 (2)
      • Backend (13)
        • Python (1)
        • JAVA (2)
        • node.js (0)
        • PHP (7)
        • 패키지매니저 (3)
      • Markdown (0)
      • SCM (1)
        • Git&Github (1)
        • SVN (0)
      • IDE (4)
        • VSCode (2)
        • IntelliJ (1)
        • Ecplise (1)
      • 취미생활 (3)
      • 정보처리기사 (2)
      • 코딩자율학습단 (5)
        • 12기 (파이썬) (5)
  • 블로그 메뉴

    • 홈
    • 태그
  • 링크

    • velog
    • github
  • 공지사항

  • 인기 글

  • 태그

    frontend
    관리자 페이지
    파이썬
    나도코딩
    Python
    반응형
    TypeScript
    swiper.js
    NPM
    코딩자율학습단
    코딩자율학습
    Admin
    회원가입
    Chart.js
    리액트
    CSS
    react
    React Swiper
    yarn berry
    php
  • 최근 댓글

  • 최근 글

  • 반응형
  • hELLO· Designed By정상우.v4.10.3
전예방
FormData 사용하기
상단으로

티스토리툴바