【譯】使用FormData對象

jayce 發(fā)布于2019-08-01 17:11 / 1788人閱讀

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

系列文章說明

原文

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

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

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

var formData = new FormData();

formData.append("username", "Groucho");
formData.append("accountnum", 123456); // 數字123456會自動轉為字符串"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”字段中的數字會自動被FormData.append()方法自動轉為字符串。（字段值可以是一個Blob、File或字符串，若值不是Blob、File之一，就會被轉為字符串）

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

用HTML表單中創(chuàng)建一個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));

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

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ā)送表單數據前進行配置，以添加一些不需用戶編輯的信息。

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

你也可以用FormData對象發(fā)送文件，只需在你的標簽間包含一個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);

注意：若你傳入了一個表單的引用，那么表單指定的方法（譯注：應指Post、Get）會覆蓋open()方法調用時指定的。

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

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

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

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

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

參見

Using XMLHttpRequest
HTMLFormElement
Blob
Typed Arrays

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

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/51009.html

【譯】使用FormData對象

摘要：用表單中創(chuàng)建一個對象要用現有的元素建立一個對象，可以在建立對象時傳入指定的元素。通過提交表單和發(fā)送文件而不使用對象若你想了解如何基于進行序列化和發(fā)送表單操作，而不使用對象，可閱讀此文。系列文章說明原文 FormData對象能讓你生成一系列用于XMLHttpRequest發(fā)送的鍵值對。它主要的目的在于發(fā)送表單數據，但也能獨立用于傳輸有鍵形式的數據。其傳輸的數據格式和表單使用sub...

maochunguang 2019-08-20 18:02 評論0 收藏0
【譯】通過JavaScript發(fā)送表單

摘要：能異步地發(fā)送任意數據的技術稱為，表示異步的和。若你使用，使用發(fā)送表單還會影響同源策略，并導致內容被發(fā)送到一個無法訪問的中。但要手動發(fā)送二進制數據的話，還有很多額外工作要做。用來發(fā)送二進制是很直接的，使用方法就好了。系列文章說明原文在[發(fā)送表單數據]()一文中，HTML表單可以聲明式地發(fā)送一個HTTP請求。但表單也可以用JavaScript來準備一個HTTP請求。本文將探索如何...

chinafgj 2019-08-20 17:52 評論0 收藏0
【譯】通過JavaScript發(fā)送表單

摘要：能異步地發(fā)送任意數據的技術稱為，表示異步的和。若你使用，使用發(fā)送表單還會影響同源策略，并導致內容被發(fā)送到一個無法訪問的中。但要手動發(fā)送二進制數據的話，還有很多額外工作要做。用來發(fā)送二進制是很直接的，使用方法就好了。系列文章說明原文在[發(fā)送表單數據]()一文中，HTML表單可以聲明式地發(fā)送一個HTTP請求。但表單也可以用JavaScript來準備一個HTTP請求。本文將探索如何...

qylost 2019-08-01 17:07 評論0 收藏0
面試寶典

摘要：有談談面試與面試題對于前端面試的一些看法。動態(tài)規(guī)劃算法的思想及實現方法幫大家理清動態(tài)規(guī)劃的解決思路以及原理方法前端經典面試題從輸入到頁面加載發(fā)生了什么這是一篇開發(fā)的科普類文章，涉及到優(yōu)化等多個方面。極客學院前端練習題道練習題，面試季練練手。由數據綁定和排序引入的幾個 JavaScript 知識點在 JavaScript 的數據綁定和做簡單的表格排序中遇到的幾個知識點 [[JS 基礎...

neu 2019-08-29 14:00 評論0 收藏0
【譯】fetch用法說明

摘要：實例生成以后，可以用方法分別指定方法和方法的回調函數。創(chuàng)建一個對象異步操作成功方法可以接受兩個回調函數作為參數。第一個回調函數是對象的狀態(tài)變?yōu)闀r調用，第二個回調函數是對象的狀態(tài)變?yōu)闀r調用。由于 FetchAPI 是基于 Promise 設計，有必要先學習一下 Promise，推薦閱讀 MDN Promise 教程本文章內容推薦閱讀 MDN Fetch 教程語法說明 fetch(u...

30e8336b8229 2019-08-20 11:20 評論0 收藏0