【譯】使用FormData對象

maochunguang 發(fā)布于2019-08-20 18:02 / 3369人閱讀

摘要：用表單中創(chuàng)建一個(gè)對象要用現(xiàn)有的元素建立一個(gè)對象，可以在建立對象時(shí)傳入指定的元素。通過提交表單和發(fā)送文件而不使用對象若你想了解如何基于進(jìn)行序列化和發(fā)送表單操作，而不使用對象，可閱讀此文。

系列文章說明

原文

FormData對象能讓你生成一系列用于XMLHttpRequest發(fā)送的鍵值對。它主要的目的在于發(fā)送表單數(shù)據(jù)，但也能獨(dú)立用于傳輸有鍵形式的數(shù)據(jù)。其傳輸?shù)臄?shù)據(jù)格式和表單使用submit()方法、且編碼類型為multipart/form-data所發(fā)送的數(shù)據(jù)格式相同。

從頭開始創(chuàng)建一個(gè)FormData對象

你可以自己建立一個(gè)FormData對象，首先進(jìn)行實(shí)例化、再通過apppend()方法來添加字段，如下所示：

var formData = new FormData();

formData.append("username", "Groucho");
formData.append("accountnum", 123456); // 數(shù)字123456會自動轉(zhuǎn)為字符串"123456"

// 用戶選擇的HTML的文件提交
formData.append("userfile", fileInputElement.files[0]);

// JavaScript的類文件對象（Blob）
var content = "hey!"; // 新文件的主體
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”字段中的數(shù)字會自動被FormData.append()方法自動轉(zhuǎn)為字符串。（字段值可以是一個(gè)Blob、File或字符串，若值不是Blob、File之一，就會被轉(zhuǎn)為字符串）

上面的例子建立了一個(gè)包含名為“username”、“accountnum”、“userfile”和“webmasterfile”字段的FormData對象。然后使用了XMLHttpRequest的send()方法來發(fā)送表單數(shù)據(jù)。“webmasterfile”字段是個(gè)Blob對象，該對象代表了一個(gè)由不可變的、原始數(shù)據(jù)組成的類文件對象，里面的的數(shù)據(jù)不必使用JavaScript的原生數(shù)據(jù)類型。File對象也是基于Blob對象的，它繼承了Blob的基本功能并做了拓展以支持用戶操作系統(tǒng)上的文件。要建立一個(gè)Blob對象，你可以使用Blob構(gòu)造函數(shù)。

用HTML表單中創(chuàng)建一個(gè)FormData對象

要用現(xiàn)有的

元素建立一個(gè)FormData對象，可以在建立FormData對象時(shí)傳入指定的元素。

var formData = new FormData(someFormElement);

舉個(gè)例子：

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

在用元素建立FromData對象之后、發(fā)送它之前，也可以給它添加額外的數(shù)據(jù)，如下：

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

這樣一來我們就能在發(fā)送表單數(shù)據(jù)前進(jìn)行配置，以添加一些不需用戶編輯的信息。

用FormData對象發(fā)送文件

你也可以用FormData對象發(fā)送文件，只需在你的標(biāo)簽間包含一個(gè)file類型的元素：


  Your email address:
  

  Custom file label:
  

  File to stash:

然后你就能用如下代碼發(fā)送文件了：

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.
";
    }
  };

  oReq.send(oData);
  ev.preventDefault();
}, false);

注意：若你傳入了一個(gè)表單的引用，那么表單指定的方法（譯注：應(yīng)指Post、Get）會覆蓋open()方法調(diào)用時(shí)指定的。

你也可以直接添加File或Blob到FormData對象，如下：

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

使用append()方法時(shí)，使用第三個(gè)可選的參數(shù)會指定一個(gè)文件名，用于請求頭的Content-Disposition字段。若沒有指定文件名（或者該參數(shù)不被支持），那就默認(rèn)使用“blob”這個(gè)名字。

通過AJAX提交表單和發(fā)送文件而不使用FormData對象

若你想了解如何基于AJAX進(jìn)行序列化和發(fā)送表單操作，而不使用FormData對象，可閱讀此文。

參見

Using XMLHttpRequest
HTMLFormElement
Blob
Typed Arrays

GPU云服務(wù)器云服務(wù)器 formdata formdata上傳文件對象存儲怎么使用 jsp 對象使用

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/84024.html

發(fā)表評論

登陸后可評論

0條評論

maochunguang

男|高級講師

我要關(guān)注我要私信

TA的文章

Java基礎(chǔ)語法筆記

閱讀 1246·2021-09-04 16:41
AHJCDN：免備案CDN，無視DDOS/CC攻擊的CDN，香港/美國GIA高速節(jié)點(diǎn)，提供免費(fèi)套餐

閱讀 2403·2021-09-02 10:18
Yoshino: 一個(gè)基于React的可定制化的PC組件庫

閱讀 917·2019-08-29 16:40
html&css面試筆記

閱讀 2614·2019-08-29 16:14
Visual Studio Code 裝飾器提示“experimentalDecorators”的解

閱讀 898·2019-08-26 13:41
使用node打造自己的命令行工具方法教程

閱讀 1299·2019-08-26 12:24
今天，我明白了JS事件循環(huán)機(jī)制

閱讀 731·2019-08-26 10:24
JavaScript 中的 forEach 源碼

閱讀 2869·2019-08-23 17:54

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

【譯】使用FormData對象

相關(guān)文章