The
FormData
interface provides a way to construct a set of key/value pairs representing form fields and their values, which can be sent using thefetch()
,XMLHttpRequest.send()
ornavigator.sendBeacon()
methods. It uses the same format a form would use if the encoding type were set to"multipart/form-data"
.
FormData
인터페이스는 form 필드와 그 값을 나타내는 일련의 key/value 쌍을 쉽게 생성할 수 있는 방법을 제공합니다. 또한XMLHttpRequest.send()
(en-US) 메서드를 사용하여 쉽게 전송할 수 있습니다. 인코딩 타입이"multipart/form-data"
로 설정된 경우, form에서 사용하는 것과 동일한 포맷을 사용해야 합니다.
즉 formData는 HTML form 필드의 값을 key와 value의 형태로 서버로 전송할 때 사용합니다. 기본적인 예시는 다음과 같습니다.
<form id="formElem">
<input type="text" name="name" value="Bora">
<input type="text" name="surname" value="Lee">
<input type="submit">
</form>
<script>
formElem.onsubmit = async (e) => {
e.preventDefault();
let response = await fetch('/article/formdata/post/user', {
method: 'POST',
body: new FormData(formElem)
});
let result = await response.json();
alert(result.message);
};
</script>
formData.append(name, value)
– name
과 value
를 가진 폼 필드를 추가formData.append(name, blob, fileName)
– <input type="file">
형태의 필드를 추가. 세 번째 인수 fileName
은 (필드 이름이 아니고) 사용자가 해당 이름을 가진 파일을 폼에 추가한 것처럼 설정해줌formData.delete(name)
– name
에 해당하는 필드를 삭제formData.get(name)
– name
에 해당하는 필드의 값을 가져옴formData.has(name)
– name
에 해당하는 필드가 있으면 true
를, 그렇지 않으면 false
를 반환FileReader
객체는 웹 애플리케이션이 비동기적으로 데이터를 읽기 위하여 읽을 파일을 가리키는File
혹은 Blob
객체를 이용해 파일의 내용을(혹은 raw data버퍼로) 읽고 사용자의 컴퓨터에 저장하는 것을 가능하게 해줍니다.FileReader
를 활용해서 웹 애플리케이션에서 사용자가 이미지 파일 변경 사항을 실시간으로 확인할 수 있게 해줍니다. 프로젝트에서 유저의 프로필 설정 및 프로필 변경에서 formData와 병합하여 사용하였습니다.FileReader.error 읽기 전용
DOMException
파일을 읽는 도중에 발생한 에러를 나타냅니다.
FileReader.readyState 읽기 전용
FileReader의 상태를 나타내는 숫자입니다.
• EMPTY
: 0
: 아직 데이터가 로드 되지 않았음.
• LOADING
: 1
: 데이터가 로딩 중.
• DONE
: 2
: 모든 읽기 요청이 완료됨.