FormData 对象的使

当本文章中

  1. 什么样创造一个FormData对象
  2. 由此HTML表单创建FormData对象
  3. 使用FormData对象上传文书
  4. 经AJAX提交表单和上传文件可以免采取FormData对象
  5. 相关链接

经过FormData对象足以组建一组用 XMLHttpRequest出殡请求的键/值对。它可以再灵活方便之殡葬表单数据,因为可以独立为表单使用。如果您拿表单的编码类型设置也multipart/form-data
,则透过FormData传输的多寡格式和表单通过submit() 方法传输的数量格式相同

安创造一个FormData对象Edit

而可好创造一个FormData对象,然后通过调用它的append()办法上加字段,就比如这么:

var formData = new FormData();

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

// HTML 文件类型input,由用户选择
formData.append("userfile", fileInputElement.files[0]);

// JavaScript file-like 对象
var content = '<a id="a"><b id="b">hey!</b></a>'; // 新文件的正文...
var blob = new Blob([content], { type: "text/xml"});

formData.append("webmasterfile", blob);

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

注意:字段 “userfile” 和 “webmasterfile”  都带有一个文件. 字段
“accountnum”
是数字型,它以吃FormData.append()措施易成为字符串类型(FormData 对象的字段类型可以是 BlobFile,
或者
string: 要是其的字段类型不是Blob也未是File,则会吃移成字符串类型。

地方的言传身教创建了一个FormData实例,包含”username”, “accountnum”,
“userfile”
和 “webmasterfile”四个字段,然后用XMLHttpRequestsend())方法发送表单数据。字段
“webmasterfile”
是 Blob类型。一个 Blob目标表示一个不可变的,
原始数据的切近文件对象。Blob代表的数码未自然是一个JavaScript原生格式。 File 接口基于Blob,继承
blob功能并将该扩张为支持用户系统及之文书。你得经过 Blob() 构造函数创建一个Blob对象。

透过HTML表单创建FormData对象Edit

怀念使结构一个含Form表单数据的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));

卿还足以在创建一个富含Form表单数据的FormData对象后跟发送请求之前,附加额外的数量到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);

这样您就算好在殡葬请求之前自由地附加不必然是用户编辑的字段到表单数据里

下FormData对象上传文书Edit

而还足以采用FormData上污染文书。使用的时刻用以表单中上加一个文件类型的input:

<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);

注意:若FormData对象是由此表单创建的,则表单中指定的求方式会于利用及艺术open()中 。

君还可直接通往FormData对象附加File或Blob类型的文本,如下所示:

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

采用appned()方法时,可以由此第三只可选参数设置发送请求的头 Content-Disposition指定文件称。如果不指定文件称(或者未支持该参数时),将动用名字“blob”。

假定您设置是的部署起,你呢得以由此jQuery来使用FormData对象:

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,  // 不处理数据
  contentType: false   // 不设置内容类型
});

经过AJAX提交表单和上传文件可以无采用FormData对象

若你想了解不以FormData对象的情景下,通过AJAX序列化和付出表单 请点击这里。

blob对象深入明,移步这里:https://developer.mozilla.org/zh-CN/docs/Web/API/Blob

正文转载为mdn:https://developer.mozilla.org/zh-CN/docs/Web/API/FormData/Using_FormData_Objects

相关文章

网站地图xml地图