formdata

FormData

• 정의: FormData는 파일과 다른 데이터를 함께 전송할 수 있도록 도와주는 객체로, 브라우저 API의 일부
• 주요 용도: 주로 파일을 포함한 폼 데이터를 처리할 때 사용

1. 폼 데이터 구성

• 키-값 쌍: FormData는 데이터 항목을 키-값 쌍으로 저장
• 일반적으로 HTML 폼의 입력 요소(name 속성)와 그 값을 매핑하여 구성

const data = new FormData();
data.append('username', 'exampleUser'); // 문자열 데이터 추가

2. 파일 업로드 지원

• 파일 포함: 사용자가 선택한 파일을 FormData에 추가할 수 있음.
• 이는 이미지, 문서 등 다양한 파일 형식이 될 수 있음. FormData는 파일을 멀티파트 형식으로 자동으로 처리하여 서버에 전송
• const fileInput = document.querySelector('input[type="file"]'); const data = new FormData(); data.append('file', fileInput.files[0]); // 파일 추가

3. 자동 멀티파트 변환

• HTTP 요청 포맷: FormData를 사용하면 요청을 멀티파트 형식으로 자동 변환. 이는 서버가 파일과 일반 텍스트 데이터를 동시에 처리할 수 있게 함

4. 다양한 데이터 타입 지원

• 여러 데이터 타입: FormData는 문자열, Blob, File, 또 다른 FormData 객체 등 다양한 데이터 타입을 지원. 이를 통해 복잡한 데이터 구조를 구성할 수 있음.
• const data = new FormData(); data.append('textField', 'Some text'); data.append('fileField', selectedFile); // 파일 추가

5. AJAX 요청과의 통합

• 비동기 전송: FormData는 XMLHttpRequest 또는 fetch API와 함께 사용되어 비동기 요청을 통해 서버에 데이터를 전송할 수 있음.
• fetch('<https://example.com/upload>', { method: 'POST', body: data // FormData 객체를 body에 설정 });

6. 폼 제출과의 차이점

• 자동 제출 없음: FormData 객체는 HTML 폼의 자동 제출과는 다름. 프로그래머가 명시적으로 AJAX 요청을 만들어야 합니다. 이는 더 많은 유연성과 제어를 제공