FormData 사용하기

2023. 12. 6. 00:50·Frontend/JavaScript & Jquery
목차
  1. FormData 만들기
  2. FormData 메서드 (append)
  3. 2-1. 파일을 append 하는방법 (파일이 1개일 때)
  4. 2-2. 파일 여러개를 append 하는 방법 (multiple)
  5. FormData 쿼리 스트링으로 만드는 방법
  6. FormData 출력하기
  7. Object → FomData로 바꾸기
  8. FomData → Object로 바꾸기
  9. 📌 참고자료

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
  1. FormData 만들기
  2. FormData 메서드 (append)
  3. 2-1. 파일을 append 하는방법 (파일이 1개일 때)
  4. 2-2. 파일 여러개를 append 하는 방법 (multiple)
  5. FormData 쿼리 스트링으로 만드는 방법
  6. FormData 출력하기
  7. Object → FomData로 바꾸기
  8. FomData → Object로 바꾸기
  9. 📌 참고자료
'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
  • 공지사항

  • 인기 글

  • 태그

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

  • 최근 글

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

개인정보

  • 티스토리 홈
  • 포럼
  • 로그인
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.