자바스크립트 FormData 객체 사용법

FormData 객체란?

FormData 객체는 HTML form 엘리먼트의 데이터를 쉽게 제어할 수 있게 해주는 자바스크립트 객체입니다. 이를 이용하면 파일 업로드를 비롯한 다양한 데이터 전송이 가능합니다.

FormData 객체 사용 방법

먼저, FormData 객체를 생성합니다.

let formData = new FormData();

그리고 이 객체에 데이터를 추가합니다. 예를 들어, 파일 업로드를 위해 input 엘리먼트의 파일을 formData 객체에 추가하는 방법은 다음과 같습니다.

let input = document.querySelector('input[type="file"]');
formData.append('file', input.files[0]);

데이터 추가 후, XMLHttpRequest 객체를 이용하여 서버로 전송할 수 있습니다.

let xhr = new XMLHttpRequest();
xhr.open('POST', '/upload');
xhr.send(formData);

왜 FormData 객체를 사용해야 할까요?

FormData 객체를 사용하면 파일 업로드가 가능해지며, 파일 업로드를 위해 필요한 multipart/form-data 형식으로 데이터를 전송할 수 있습니다. 또한, FormData 객체를 사용하면 객체의 append() 메소드를 이용하여 데이터를 쉽게 추가할 수 있으며, 특히 FormData 객체를 이용하면 form 엘리먼트의 데이터를 쉽게 제어할 수 있는 장점이 있습니다.

(최대 100단어)
FormData 객체는 HTML form 엘리먼트의 데이터를 자바스크립트로 쉽게 제어할 수 있게 해주는 객체입니다. 파일 업로드를 비롯한 다양한 데이터 전송이 가능하며, 서버로 전송하기 전에 XMLHttpRequest 객체를 이용하여 데이터를 전송할 수 있습니다. 이를 이용하여, form 엘리먼트의 데이터를 쉽게 제어할 수 있으며, 특히 파일 업로드에 용이합니다.