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

今日は 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 を使用してファイルを送信できます。単純な

には 要素が含まれているだけです:

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 オブジェクトに直接追加することもできます。 : <br/>

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

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

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

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

<br/>

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

関連書籍:

Js を使用して HTTP Cookie を操作する実装手順

BOM オブジェクト モデルを操作する Js の詳細な紹介

HTML Web ページ レイアウトにおける div と span の違いは何ですか

以上がHTML の FormData オブジェクトの詳細な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。