JavaScript FormData 인터페이스는 키-값 쌍이 있는 객체를 생성하는 방법을 제공합니다. 이러한 객체는 fetch() 또는 XMLHttpRequest.send() 메서드를 사용하여 인터넷을 통해 공유될 수 있습니다. HTML 양식 요소의 기능을 사용합니다. 인코딩 유형이 'multipart/form-data'로 설정된 형식에서 사용되는 것과 동일한 형식을 사용합니다.
또한 이를 URLSearchParams 생성자에 직접 전달하여 GET 요청 제출 시 태그 동작과 마찬가지로 쿼리 매개변수를 가져올 수도 있습니다.
일반적으로 서버로 보내기 위한 데이터 세트를 생성하는데 사용됩니다. FormData 객체는 각 요소에 대해 하나의 배열을 포함하는 배열의 배열입니다.
이러한 배열에는 다음 세 가지 값이 있습니다.
이름: 여기에는 필드 이름이 포함됩니다.
값: 여기에는 String 또는 Blob 객체일 수 있는 필드 값이 포함됩니다.
파일 이름: 여기에는 이름이 포함된 문자열인 파일 이름이 포함됩니다. blob 개체가 2로 전달되면 이름이 서버에 저장됩니다.nd매개변수.
왜 FormData인가?
HTML 양식 요소는 해당 필드와 값을 자동으로 캡처하는 방식으로 개발되었습니다. 이러한 시나리오에서 FormData 인터페이스는 파일 및 추가 필드가 있거나 없는 HTML 양식을 보내는 데 도움이 됩니다.
사용자가 입력한 양식 데이터가 포함된 개체입니다.
다음은 양식 데이터 생성자입니다.
let formData = new FormData([form]);
FormData 개체는 가져오기와 같은 네트워크 메서드에 의해 본문으로 허용될 수 있습니다. 기본적으로 Content-Type: multipart/form-data로 인코딩되어 전송됩니다.
서버는 이를 일반 양식 제출로 간주합니다.
FormData를 보내는 간단한 예를 살펴보겠습니다.
기본 FormData 보내기
아래 양식에서는 간단한 FormData를 서버로 보냅니다.
Index.html:
formElem.onsubmit = async (e) => { e.preventDefault(); const data=new FormData(myform) let response = await fetch('url', { method: 'POST', body: data }); let result = await response.json(); Console.log(result); }; 위의 예에서는 데이터 전송을 위한 백엔드 API를 설정하지 않았습니다. 이는 이 튜토리얼의 범위를 벗어나기 때문입니다. 그러나 네트워크 탭에 대한 페이로드를 확인하고 FormData 인터페이스가 어떻게 작동하는지 이해할 수 있습니다.
따라서 개발자 도구에서 네트워크 요청을 살펴보면 아래와 같은 페이로드가 표시됩니다.
위의 네트워크 요청에서 양식 데이터는 FormData 개체를 사용하여 네트워크를 통해 전송됩니다. 다른 방법으로는 양식에서 데이터를 가져오기 위해 여러 메서드를 지정해야 합니다.
따라서 FormData 인터페이스를 사용하면 formData를 서버로 쉽게 보낼 수 있습니다. 그것은 단지 한 줄짜리 코드입니다.
FormData 생성자
FormData() 생성자는 새 FormData 개체를 만드는 데 사용됩니다. 다음과 같은 방법으로 사용할 수 있습니다.
new FormData() new FormData(form) new FormData(form, submitter)
매개변수:
양식(선택사항):
이는 HTML 요소입니다. 지정되면 FormData 객체는 양식의 현재 키/값으로 채워집니다. 키에는 각 요소의 이름 속성 속성을 사용하고 값에는 제출된 값을 사용합니다. 또한 파일 입력 내용을 인코딩합니다.
제출자(선택사항):
제출자 버튼은 양식의 요소입니다. 제출자 요소에 이름 속성 속성이 있으면 해당 데이터가 FormData 개체에 포함됩니다.
파이썬 뱀 대 아나콘다
FormData 메서드
FormData는 양식 필드 데이터에 액세스하고 수정하는 데 도움이 될 수 있는 여러 가지 방법을 제공합니다.
더 적은 경우에는 양식 데이터를 서버로 보내기 전에 변경해야 할 수도 있습니다. 이러한 경우에는 이러한 방법이 도움이 될 수 있습니다.
다음은 몇 가지 유용한 formData 메소드입니다.
formData.append(이름, 값)
두 인수의 이름과 값을 사용하고 제공된 이름과 값이 있는 양식 필드 개체를 추가합니다.
formData.append(이름, blob, 파일 이름)
name, blob 및 fileName 인수를 사용합니다. HTML 요소가 인 경우 데이터 개체를 형성하기 위한 필드를 추가하고 세 번째 인수 fileName은 사용자 파일 시스템의 파일 이름에 따라 파일 이름을 설정합니다.
formData.delete(이름)
이름을 인수로 사용하고 동일한 이름을 가진 지정된 필드를 제거합니다.
formData.get(이름)
또한 이름을 인수로 사용하고 지정된 이름으로 지정된 필드의 값을 가져옵니다.
formData.has(이름)
또한 이름을 인수로 사용하고, 해당 이름이 있는 필드의 존재를 확인하고, 존재하는 경우 true를 반환합니다. 그렇지 않으면 거짓입니다.
숫자로 보는 알파벳
양식에는 동일한 이름을 가진 여러 필드가 있을 수 있으므로 동일한 이름의 필드를 모두 추가하려면 여러 추가 방법을 지정해야 합니다.
그러나 이름이 같은 필드는 오류를 일으키고 데이터베이스에 필드를 설정할 때 복잡해집니다. 따라서 formData는 추가와 동일한 구문을 가진 또 다른 메서드를 제공하지만 지정된 이름을 가진 모든 필드를 제거한 다음 새 필드를 추가합니다. 따라서 이름이 있는 고유 키가 있음을 보장합니다.
formData.set(name, value) formData.set(name, blob, fileName)
set 메소드에서 구문은 추가 메소드처럼 작동합니다.
FormData를 반복하는 방법?
FormData는 모든 키를 반복하는 FormData.entries() 메서드를 제공합니다. 이 메소드는 FormData의 모든 키/값 항목을 반복하는 반복자를 반환합니다. 키는 문자열 객체인 반면, 값은 BLOB 또는 문자열일 수 있습니다.
아래 예를 고려하십시오.
formData.append('key1', 'value1'); formData.append('key2', 'value2'); // Display the key/value pairs for (const pair of formData.entries()) { console.log(`${pair[0]}, ${pair[1]}`); } 위 예제의 출력은 다음과 같습니다.
key1, value1 key2, value2
데이터 파일이 포함된 양식 보내기
FormData를 사용하여 파일을 보낼 수도 있습니다. 파일은 양식 요소에서 작동하며 Content-Type: multipart/form-data로 전송됩니다. multipart/form-data 인코딩을 사용하면 파일을 보낼 수 있습니다. 따라서 기본적으로 양식 데이터의 일부입니다. 양식 데이터 인코딩을 사용하여 파일을 서버로 보낼 수 있습니다.
아래 예를 고려하십시오.
File: myform.onsubmit = async (e) => { e.preventDefault(); const data=new FormData(myform) console.log(data) let response = await fetch('url', { method: 'POST', body: data }); let result = await response.json(); }; 위의 예에서 이미지 객체는 FormData를 사용하여 바이너리 형식으로 전송됩니다. 개발자 도구의 네트워크 탭에서 이를 확인할 수 있습니다.
양식 데이터를 Blob 객체로 보내기
양식 데이터를 Blob 개체로 보내는 것은 동적으로 생성된 이진 데이터를 보내는 쉬운 방법입니다. 어떤 이미지나 얼룩이라도 될 수 있습니다. fetch 본문에 전달하여 서버로 직접 보낼 수 있습니다.
이미지 데이터와 이름, 비밀번호 등과 같은 기타 양식 데이터를 보내는 것이 편리합니다. 또한 서버는 바이너리 데이터보다는 다중 부분으로 인코딩된 양식을 허용하는 데 더 친숙합니다.
다른 양식 데이터와 함께 이미지를 양식으로 보내는 아래 예를 고려하십시오.
mycanvas.onmousemove = function(e) { let ctx = mycanvas.getContext('2d'); ctx.lineTo(e.clientX, e.clientY); ctx.stroke(); }; async function submit() { let imageBlob = await new Promise(resolve => mycanvas.toBlob(resolve, 'image/png')); let formData = new FormData(); formData.append('firstName', 'Alex'); formData.append('image', imageBlob, 'image.webp'); let response = await fetch('url', { method: 'POST', body: formData }); let result = await response.json(); alert(result.message); } 위의 예에서는 다음과 같이 이미지 Blob이 추가된 것을 볼 수 있습니다.
formData.append('image', imageBlob, 'image.webp');
이는 와 동일하며 사용자는 파일 시스템의 일부 데이터 imageBlob과 함께 'image.webp'라는 이름의 파일을 제출했습니다. 서버는 이를 일반 형식 데이터로 읽습니다.