JavaScript オブジェクトでの FormData の使用

一个新手

リリース： 2017-09-06 13:20:19

オリジナル

1955 人が閲覧しました

FormData オブジェクトの使い方

この記事の内容

FormData オブジェクトの作成方法
HTML フォームから FormData オブジェクトを作成する
FormData オブジェクトを使用してファイルをアップロードする
フォームを送信してファイルをアップロードするAJAX FormData オブジェクトを使用する必要はありません
関連リンク

FormData オブジェクトを使用すると、XMLHttpRequest を使用してリクエストを送信するためのキーと値のペアのセットを組み立てることができます。。フォームとは独立して使用できるため、フォームデータの送信がより柔軟で便利になります。フォームのエンコードタイプを multipart/form-data に設定した場合、FormData を通じて送信されるデータ形式は、フォームから submit() メソッドを通じて送信されるデータ形式と同じになりますXMLHttpRequest发送请求的键/值对。它可以更灵活方便的发送表单数据，因为可以独立于表单使用。如果你把表单的编码类型设置为multipart/form-data ，则通过FormData传输的数据格式和表单通过submit() 方法传输的数据格式相同

如何创建一个FormData对象Edit

你可以自己创建一个FormData对象，然后通过调用它的append()方法添加字段，就像这样：

var formData = new FormData();

formData.append("username", "Groucho");
formData.append("accountnum", 123456); // 数字 123456 会被立即转换成字符串 "123456"// HTML 文件类型input，由用户选择formData.append("userfile", fileInputElement.files[0]);// JavaScript file-like 对象var content = '<a id="a"><b id="b">hey!</b></a>'; // 新文件的正文...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()方法转换成字符串类型(FormData 对象的字段类型可以是 Blob, File, 或者 string: 如果它的字段类型不是Blob也不是File，则会被转换成字符串类型。

上面的示例创建了一个FormData实例，包含"username", "accountnum", "userfile" 和 "webmasterfile"四个字段，然后使用XMLHttpRequest的send()方法发送表单数据。字段 "webmasterfile" 是 Blob类型。一个 Blob对象表示一个不可变的, 原始数据的类似文件对象。Blob表示的数据不一定是一个JavaScript原生格式。 File 接口基于Blob，继承 blob功能并将其扩展为支持用户系统上的文件。你可以通过 Blob() 构造函数创建一个Blob对象。

通过HTML表单创建FormData对象Edit

想要构造一个包含Form表单数据的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));

ログイン後にコピー

你还可以在创建一个包含Form表单数据的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);

ログイン後にコピー

这样你就可以在发送请求之前自由地附加不一定是用户编辑的字段到表单数据里

使用FormData对象上传文件Edit

你还可以使用FormData上传文件。使用的时候需要在表单中添加一个文件类型的input：

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

ログイン後にコピー

然后使用下面的代码发送请求：

var form = document.forms.namedItem("fileinfo");
form.addEventListener('submit', function(ev) {  var oOutput = document.querySelector("p"),
      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);

ログイン後にコピー

注意：如果FormData对象是通过表单创建的，则表单中指定的请求方式会被应用到方法open()中。

你还可以直接向FormData对象附加File或Blob类型的文件，如下所示：

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

ログイン後にコピー

使用appned()方法时，可以通过第三个可选参数设置发送请求的头 Content-Disposition

FormData オブジェクトを作成する方法編集

FormData オブジェクトを自分で作成し、次のように append() メソッドを呼び出してフィールドを追加します。

var fd = new FormData(document.querySelector("form"));
fd.append("CustomField", "This is some extra data");
$.ajax({
  url: "stash.php",
  type: "POST",
  data: fd,
  processData: false,  // 不处理数据
  contentType: false   // 不设置内容类型});

ログイン後にコピー

注: >フィールド「userfile」と「webmasterfile」にはファイルが含まれています。フィールド「accountnum」は数値型であり、FormData.append() メソッドによって文字列型に変換されます (フィールドFormData オブジェクトのタイプは、Blob、File、または文字列です。フィールドのタイプが Blob でも File でもない場合、文字列型に変換されます

上記の例では、「username」、「accountnum」、「userfile」、「webmasterfile」の 4 つのフィールドを含む FormData インスタンスを作成し、次を使用します。 XMLHttpRequest >send() メソッドは、フォームデータを送信します。フィールド "webmasterfile" のタイプは Blob です。 Blob で表されるデータは、必ずしも JavaScript ネイティブ形式であるとは限りません。File インターフェイスは、Blob の機能を継承し、ファイルをサポートするために拡張されています。ユーザーのシステムで Blob() コンストラクターは Blob オブジェクトを作成します <br><h2 class="highlight-spanned"><span class="highlight-span"> HTML フォーム<span class="icon-pencil">編集</span></span></h2>を介してオブジェクトを作成します

フォームデータを含む FormData オブジェクトを構築する場合は、フォームの要素を指定する必要がありますFormData オブジェクトを作成するとき。 🎜🎜🎜🎜rrreee🎜次のように、Form フォームデータを含む FormData オブジェクトを作成した後、リクエストを送信する前に、FormData オブジェクトに追加データを追加することもできます: 🎜🎜🎜🎜rrreee🎜この方法でリクエストを送信できます。必ずしもユーザーが編集可能ではないフィールドをフォームデータに自由に追加できました🎜

FormData オブジェクトを使用してファイルをアップロードします編集

🎜FormData を使用してファイルをアップロードすることもできます。これを使用する場合、フォームにファイルタイプの入力を追加する必要があります: 🎜🎜🎜🎜rrreee🎜 次に、次のコードを使用してリクエストを送信します: 🎜🎜🎜🎜rrreee

🎜🎜🎜注:FormData オブジェクトがフォームを通じて作成された場合、フォームで指定されたリクエストメソッドがメソッド open() に適用されます。 🎜🎜以下に示すように、File または Blob タイプのファイルを FormData オブジェクトに直接添付することもできます: 🎜rrreee🎜 appended() メソッドを使用する場合、3 番目のオプションのパラメーター Content を通じて送信リクエストのヘッダーを設定できます。 -Disposition ファイル名を指定します。ファイル名が指定されていない場合 (またはこのパラメーターがサポートされていない場合)、「blob」という名前が使用されます。 🎜🎜正しい構成項目を設定すると、jQuery を通じて FormData オブジェクトを使用することもできます: 🎜🎜🎜🎜rrreee🎜🎜🎜

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