ホームページ > 記事 > ウェブフロントエンド > HTML の FormData オブジェクトの詳細な紹介

HTML の FormData オブジェクトの詳細な紹介

php中世界最好的语言オリジナル: 2017-12-02 15:06:231984ブラウズ

今日は FormData オブジェクトについて詳しく説明します。次に、FormData オブジェクトを最初から作成し、append() メソッドを使用してオブジェクトにキー値を追加する場合を参照してください。 : フィールド "userfile" と "webmasterfile" 両方の

にはファイル

(file) が含まれています。フィールド「accountnum」に割り当てられた数値は、FormData.append() メソッドによって string に直接変換されます (フィールドの値は、Blob、File、または文字列の可能性があります。値が Blob でもなければ、文字列でもありません)ファイルの場合、値は文字列に変換されます)。この例では、フィールド「username」、「accountnum」、「userfile」、「webmasterfile」を含む FormData インスタンスを作成し、XMLHttpRequest オブジェクトの send() メソッドを使用してフォームデータを送信します。フィールド「webmasterfile」は BLOB です。 Blob オブジェクトは、ファイルオブジェクトの生データを表します。ただし、Blob で表されるデータは、ネイティブ JavaScript 形式のデータである必要はありません。ファイルインターフェイスは Blob に基づいており、Blob の機能を継承し、ユーザー

ファイルシステム

のサポートを拡張しています。 BLOB を構築するには、Blob()コンストラクターを呼び出すことができます。

HTML フォームから FormData オブジェクトを取得する

既存のフォームデータを含む FormData オブジェクトを取得するには、FormData オブジェクトの作成時に form 要素を指定する必要があります。

var formData = new FormData();
formData.append("username", "Groucho");
formData.append("accountnum", 123456); // number 123456 is immediately converted to a string "123456"
// HTML file input, chosen by user
formData.append("userfile", fileInputElement.files[0]);
// JavaScript file-like object
var content = &#39;<a id="a"><b id="b">hey!</b></a>&#39;; // the body of the new file...
var blob = new Blob([content], { type: "text/xml"});
formData.append("webmasterfile", blob);
var request = new XMLHttpRequest();
request.open("POST", "http://foo.com/submitform.php");

次のように:

var formData = new FormData(someFormElement);

FormData オブジェクトを取得した後に、次のように追加データを追加することもできます:

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

この方法では、送信前に追加情報を追加できますが、必ずしもユーザーが編集する必要はありません。

3. FormData オブジェクトを使用してファイルを送信します

FormData を使用してファイルを送信できます。単純な ff9c23ada1bcecdd1a0fb5d5a0f18437 には d5fd7aea971a85678ba271703566ebfd 要素が含まれているだけです:

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

次に、次のコードを使用して送信できます:

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

次のように、File または Blob を FormData オブジェクトに直接追加することもできます。 :

var form = document.forms.namedItem("fileinfo");
form.addEventListener(&#39;submit&#39;, 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);

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

append() メソッドを使用する場合、3 番目のパラメーターを使用してファイル名を送信できます (Content-Disposition ヘッダーを介して送信されます)。サーバーに送信します）。 3 番目のパラメーターが指定されていないか、サポートされていない場合、3 番目のパラメーターはデフォルトの「blob」になります。

正しいオプションを設定すれば、jQuery でも使用できます:

<br/>

これらの事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php の他の関連記事に注目してください。中国語のサイトです！