HTML의 FormData 개체에 대한 자세한 소개

오늘은 FormData 객체에 대해 자세히 소개하겠습니다. 다음은 처음부터 FormData 객체를 생성한 후, Append() 메소드를 통해 해당 객체에 키값을 추가하는 사례를 참고하세요

var formData = new FormData();
formData.append("username", "Groucho");
formData.append("accountnum", 123456); // number 123456 is immediately converted to a string "123456"
// HTML file input, chosen by user
formData.append("userfile", fileInputElement.files[0]);
// JavaScript file-like object
var content = &#39;<a id="a"><b id="b">hey!</b></a>&#39;; // the body of the new file...
var blob = new Blob([content], { type: "text/xml"});
formData.append("webmasterfile", blob);
var request = new XMLHttpRequest();
request.open("POST", "http://foo.com/submitform.php");

참고 : 필드 "userfile" 및 "webmasterfile" 둘 다 파일 (파일)을 포함합니다. "accountnum" 필드에 할당된 숫자는 FormData.append() 메서드에 의해 string으로 직접 변환됩니다(필드 값은 Blob, File 또는 문자열일 수 있습니다. 값이 Blob도 아니고 문자열도 아닌 경우). 파일인 경우 값은 문자열로 변환됩니다.)

이 예제에서는 "username", "accountnum", "userfile" 및 "webmasterfile" 필드가 포함된 FormData 인스턴스를 만든 다음 XMLHttpRequest 개체의 send() 메서드를 사용하여 양식 데이터를 보냅니다. "webmasterfile" 필드는 Blob입니다. Blob 객체는 파일 객체의 원시 데이터를 나타냅니다. 그러나 Blob이 나타내는 데이터는 기본 JavaScript 형식의 데이터일 필요는 없습니다. 파일 인터페이스는 Blob을 기반으로 하며 Blob 기능을 상속하고 사용자 파일 시스템에 대한 지원을 확장합니다. Blob을 생성하려면 Blob()constructor를 호출하면 됩니다.

HTML 양식에서 FormData 객체 가져오기

기존 양식 데이터가 포함된 FormData 객체를 얻으려면 FormData 객체를 생성할 때 양식 요소를 지정해야 합니다.

var formData = new FormData(someFormElement);

다음과 같습니다:

var formElement = document.querySelector("form");
var request = new XMLHttpRequest();
request.open("POST", "submitform.php");
request.send(new FormData(formElement));

다음과 같이 FormData 개체를 가져온 후 추가 데이터를 추가할 수도 있습니다.

var formElement = document.querySelector("form");
var formData = new FormData(formElement);
var request = new XMLHttpRequest();
request.open("POST", "submitform.php");
formData.append("serialnumber", serialNumber++);
request.send(formData);

이 방법을 사용하면 전송하기 전에 추가 정보를 추가할 수 있으며 반드시 사용자가 편집할 필요는 없습니다.

3. FormData 개체를 사용하여 파일 보내기

FormData를 사용하여 파일을 보낼 수 있습니다. 간단한

에는 요소가 포함되어 있습니다.

<form enctype="multipart/form-data" method="post" name="fileinfo">
  <label>Your email address:</label>
  <input type="email" autocomplete="on" autofocus name="userid" placeholder="email" required size="32" maxlength="64" /><br />
  <label>Custom file label:</label>
  <input type="text" name="filelabel" size="12" maxlength="32" /><br />
  <label>File to stash:</label>
  <input type="file" name="file" required />
  <input type="submit" value="Stash the file!" />
</form>
<div></div>

그런 다음 다음 코드를 사용하여 보낼 수 있습니다.

var form = document.forms.namedItem("fileinfo");
form.addEventListener('submit', function(ev) {
  var oOutput = document.querySelector("div"),
      oData = new FormData(form);
  oData.append("CustomField", "This is some extra data");
  var oReq = new XMLHttpRequest();
  oReq.open("POST", "stash.php", true);
  oReq.onload = function(oEvent) {
    if (oReq.status == 200) {
      oOutput.innerHTML = "Uploaded!";
    } else {
      oOutput.innerHTML = "Error " + oReq.status + " occurred when trying to upload your file.<br \/>";
    }
  };
  oReq.send(oData);
  ev.preventDefault();
}, false);

<br/>

다음과 같이 File 또는 Blob을 직접 추가할 수도 있습니다. :

<br/>

data.append("myfile", myBlob, "filename.txt");

append() 메서드를 사용할 때 세 번째 매개변수를 사용하여 파일 이름을 보낼 수 있습니다(Content-Disposition 헤더를 통해 전송됨). 서버에). 세 번째 매개변수가 지정되지 않거나 지원되지 않는 경우 세 번째 매개변수의 기본값은 "blob"입니다.

<br/>

올바른 옵션을 설정했다면 jQuery와 함께 사용할 수도 있습니다.

var fd = new FormData(document.querySelector("form"));
fd.append("CustomField", "This is some extra data");
$.ajax({
  url: "stash.php",
  type: "POST",
  data: fd,
  processData: false,  // tell jQuery not to process the data
  contentType: false   // tell jQuery not to set contentType
});

이 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP의 다른 관련 기사에 주목하세요. 중국사이트!

관련 읽기:

Js를 사용하여 HTTP 쿠키를 작동하는 구현 단계

Js 운영 BOM 개체 모델에 대한 자세한 소개

HTML 웹 페이지 레이아웃에서 div와 범위의 차이점은 무엇입니까

위 내용은 HTML의 FormData 개체에 대한 자세한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!