FormDataオブジェクト

記事はhttps://developer.mozilla.org/zh-CN/docs/Web/API/FormData
XMLHttpRequest Level 2に新しいインタフェースが追加されましたFormData.利用FormData JavaScriptを使用して、一連のフォームコントロールをいくつかのキー値ペアでシミュレートできます.XMLHttpRequestのsend()メソッドは、この「フォーム」を非同期でコミットします.通常のajaxよりも、FormDataの最大の利点は、バイナリファイルを非同期でアップロードできることです.
使い方をもっと詳しく知りたいFormDataオブジェクト、FormDataを使用するオブジェクトを参照してください.
コンストラクタnew FormData (form? : HTMLFormElement)
パラメータ
form(オプション)
ファイル入力ボックスを含む任意の形式のフォームコントロールを含むHTMLフォーム要素.
方法
append()
現在のFormData / を与える.

void append(DOMString name, Blob value, optional DOMString filename);
void append(DOMString name, DOMString value);

パラメータ値name
フィールド名value
フィールドの値.すべてがそうでない場合、自動的に文字列に変換される文字列であってもよい.filename
(オプション)ファイルのファイル名を指定します.valueパラメータは1つに指定されていますBlobオブジェクトまたは1つFileオブジェクトの場合、そのファイル名はサーバに送信され、Blobオブジェクトの場合、この値はデフォルトで「blob」である.
注:Blobオブジェクトをフィールド値として1つに追加FormDataオブジェクトでは、Ajaxを使用してこれをFormDataオブジェクトがサーバにコミット場合、コミットデータのうち対応するファイルのファイル名を表す「Content-Disposition」フィールドの値はブラウザによって異なる場合があり、仕様では「blob」と規定する、Geckoの初期実装バージョンでは空の文字列となり、下面のGeckoコメントを表示する.
Methods FormData.append()
Appends a new value onto an existing key inside a FormData object, or adds the key if it does not already exist. FormData.delete()
Deletes a key/value pair from a FormData object. FormData.entries()
Returns an iterator allowing to go through all key/value pairs contained in this object. FormData.get()
Returns the first value associated with a given key from within a FormData object. FormData.getAll()
Returns an array of all the values associated with a given key from within a FormData . FormData.has()
Returns a boolean stating whether a FormData object contains a certain key/value pair. FormData.keys()
Returns an iterator allowing to go through all keys of the key/value pairs contained in this object. FormData.set()
Sets a new value for an existing key inside a FormData object, or adds the key/value if it does not already exist. FormData.values()
Returns an iterator allowing to go through all values of the key/value pairs contained in this object.
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 = 'hey!'; // 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」に付与する数値は、自動的に文字に変換されます(フィールドの値は1つでもよい).Blobオブジェクト、1Fileオブジェクト、または1つの文字列、残りの他のタイプの値は自動的に文字列に変換されます).
この例ではoMyFormという名前のFormData「username」、「accountnum」、「userfile」および「websmasterfile」というフィールド名を含むオブジェクト.XMLHttpRequestのsend()メソッドはこれらのデータを送信します.「webmasterfile」フィールドの値は文字列ではなく、文字列です.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オブジェクトを使用したファイルの送信
まだ使えますFormDataはバイナリファイルを送信します.まずHTMLにファイル入力ボックスを含むform要素があります.
  Your email address:
 

  Custom file label:
 

  File to stash:
 


Stash the file!
次に、次のコードを使用して、ユーザーが選択したファイルを非同期でアップロードできます.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.
";
    }
  };

  oReq.send(oData);
}
HTMLフォームを使わずに直接FormDataオブジェクトに1つ追加Fileオブジェクトまたは1つBlobオブジェクト:data.append("myfile", myBlob);
FormDataオブジェクトのフィールド値がBlobオブジェクトである場合、httpリクエストの送信時に、そのBlobオブジェクトに含むファイルのファイル名を表す「Content-Disposition」リクエストヘッダの値がブラウザによって異なる、Firefoxは固定文字列「blob」を使用し、Chromeはランダム文字列を使用する.
jQueryを使って送信することもできますFormData, : 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
});
このページの貢献者:anchengjian,ziyunfei,ethertank
 
最終編集者:anchengjian,Jan 14,2016,11:47:55 PM