HTML5 FormData 객체 사용에 대한 상세한 분석-H5 튜토리얼-php.cn

HTML5 FormData 객체 사용에 대한 상세한 분석

黄舟

풀어 주다： 2017-03-22 15:29:30

원래의

1910명이 탐색했습니다.

XMLHttpRequest 레벨 2에는 새로운 인터페이스인 FormData가 추가되었습니다. 。FormData를 사용하여 对象， 일부 키-값 쌍을 사용하여 JavaScript를 통해 일련의 양식 컨트롤을 시뮬레이션할 수 있습니다. () 메서드를 사용하면 양식을 비동기적으로 제출할 수 있습니다. 일반 Ajax와 비교했을 때 FormData를 사용하는 가장 큰 장점은 바이너리 파일을 비동기적으로 업로드할 수 있다는 것입니다.

FormData 개체 만들기

먼저 빈 FormData 개체를 만든 다음 append() 메서드를 사용하여 다음과 같이 개체에 필드를 추가할 수 있습니다.

var oMyForm = new FormData();

oMyForm.append("username", "Groucho");
oMyForm.append("accountnum", 123456); // 数字123456被立即转换成字符串"123456"

// fileInputElement中已经包含了用户所选择的文件
oMyForm.append("userfile", fileInputElement.files[0]);

var oFileBody = "<a id="a"><b id="b">hey!</b></a>"; // Blob对象包含的文件内容
var oBlob = new Blob([oFileBody], { type: "text/xml"});

oMyForm.append("webmasterfile", oBlob);

var oReq = new XMLHttpRequest();
oReq.open("POST", "http://foo.com/submitform.php");
oReq.send(oMyForm);

로그인 후 복사

참고: "userfile" 및 "webmasterfile" 필드의 값에는 모두 파일이 포함되어 있습니다. FormData.append() 메소드를 통해 "accountnum" 필드에 할당된 숫자는 자동으로 문자로 변환됩니다(필드의 값은 Blob 개체, File 개체 또는 문자열일 수 있으며 다른 유형의 나머지 값은 자동으로 문자열로 변환됩니다.)

이 예에서는 "username", "accountnum", "userfile" 및 "webmasterfile"이라는 필드 이름이 포함된 oMyForm이라는 FormData 개체를 만든 다음 <🎜의 XMLHttpRequest 메서드를 사용합니다. > 이 데이터를 보냅니다. "webmasterfile" 필드의 값은 문자열이 아니라 send() 개체입니다. Blob

HTML 양식 을 사용하여 FormData 객체 초기화

기존 양식 요소를 사용하여

을 초기화할 수 있습니다. 이 FormData 对象， 요소를 매개변수로 전달하면 됩니다. form FormData 생성자 :

var newFormData = new FormData(someFormElement);

로그인 후 복사

예:

var formElement = document.getElementById("myFormElement");
var oReq = new XMLHttpRequest();
oReq.open("POST", "submitform.php");
oReq.send(new FormData(formElement));

로그인 후 복사

다음과 같이 기존 양식 데이터를 기반으로 새 키-값 쌍을 계속 추가할 수도 있습니다.

var formElement = document.getElementById("myFormElement");
formData = new FormData(formElement);
formData.append("serialnumber", serialNumber++);
oReq.send(formData);

로그인 후 복사

전송하기 전에 사용자가 이런 방식으로 편집하지 못하게 하려는 일부 고정 필드를 추가할 수 있습니다.

FormData 개체를 사용하여 파일을 보냅니다

또한 바이너리 파일을 보내려면

을 사용하세요. 먼저 HTML의 파일 입력 상자가 포함된 양식 요소가 있어야 합니다. 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 />
</form>
<p id="output"></p>
<a href="javascript:sendForm()">Stash the file!</a>

로그인 후 복사

그런 다음 다음 코드를 사용하여 사용자가 선택한 파일을 비동기적으로 업로드할 수 있습니다. 🎜>

function sendForm() {
  var oOutput = document.getElementById("output");
  var oData = new FormData(document.forms.namedItem("fileinfo"));

  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 uploading your file.<br \/>";
    }
  };

  oReq.send(oData);
}

로그인 후 복사

HTML 양식을 사용하지 않고

개체 또는

개체를 FormData 개체에 직접 추가할 수도 있습니다. File

data.append("myfile", myBlob);

로그인 후 복사

Blob FormData 개체의 필드인 경우 값

객체로, HTTP 요청을 보낼 때

객체에 포함된 Blob 파일 이름의 "Content-DisBlob position" 요청 헤더 값을 나타냅니다. 브라우저마다 다릅니다. Firefox는 고정 문자열 "blob"을 사용하는 반면 Chrome은 임의 문자열을 사용합니다. jQuery를 사용하여

var fd = new FormData(document.getElementById("fileinfo"));
fd.append("CustomField", "This is some extra data");
$.ajax({
  url: "stash.php",
  type: "POST",
  data: fd,
  processData: false,  // 告诉jQuery不要去处理发送的数据
  contentType: false   // 告诉jQuery不要去设置Content-Type请求头
});

로그인 후 복사

브라우저 호환성 FormData，但必须要正确的设置相关选项：

데스크톱:

모바일:

Opera 모바일 4.0 ( 2.0)

기능

Android