From 449daf69636d4f08b74b3964f4bf662b2f3264a2 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Mon, 19 Jul 2021 01:17:02 +0900 Subject: Web/API/FormData/Using_FormData_Objects を更新 (#1490) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - conflicting 版の方が翻訳が充実していたので、正規版をこの版で置き換え (履歴も置き換え) - 2021/07/10 時点の英語版に同期 --- .../api/formdata/using_formdata_objects/index.html | 109 ++++++++++++++++----- 1 file changed, 84 insertions(+), 25 deletions(-) (limited to 'files/ja/web') diff --git a/files/ja/web/api/formdata/using_formdata_objects/index.html b/files/ja/web/api/formdata/using_formdata_objects/index.html index 52693dd61d..761a08abec 100644 --- a/files/ja/web/api/formdata/using_formdata_objects/index.html +++ b/files/ja/web/api/formdata/using_formdata_objects/index.html @@ -1,24 +1,34 @@ --- title: FormData オブジェクトの使用 slug: Web/API/FormData/Using_FormData_Objects +tags: + - AJAX + - Blob + - File + - FormData + - Forms + - XHR + - XMLHttpRequest translation_of: Web/API/FormData/Using_FormData_Objects --- -

The FormData object lets you compile a set of key/value pairs to send using XMLHttpRequest. It is primarily intended for use in sending form data, but can be used independently from forms in order to transmit keyed data. The transmitted data is in the same format that the form's {{domxref("HTMLFormElement.submit","submit()")}} method would use to send the data if the form's encoding type were set to multipart/form-data.

+
{{APIRef("XMLHttpRequest")}}
-

Creating a FormData object from scratch

+

FormData オブジェクトは、XMLHttpRequest を使用して送信するためのキーと値のペアのセットを収集可能にします。本来はフォームデータの送信に使用することを想定していましたが、キーのついたデータを伝送するためにフォームとは独立して使用することもできます。伝送されるデータは、フォームのエンコードタイプが multipart/form-data に設定されている場合に、{{domxref("HTMLFormElement.submit","submit()")}} メソッドで送信する際に使用するデータと同じ形式です。

-

You can build a FormData object yourself, instantiating it then appending fields to it by calling its {{domxref("FormData.append","append()")}} method, like this:

+

ゼロから FormData オブジェクトを作成する

+ +

以下のように FormData オブジェクトはあなた自身で作成でき、インスタンス化したら {{domxref("FormData.append","append()")}} メソッドを呼び出すことでフィールドに付加します:

var formData = new FormData();
 
 formData.append("username", "Groucho");
-formData.append("accountnum", 123456); // number 123456 is immediately converted to a string "123456"
+formData.append("accountnum", 123456); // 数値 123456 は直ちに文字列 "123456" へ変換されます
 
-// HTML file input, chosen by user
+// HTML の file input でユーザーが選択したファイル
 formData.append("userfile", fileInputElement.files[0]);
 
-// JavaScript file-like object
-var content = '<a id="a"><b id="b">hey!</b></a>'; // the body of the new file...
+// ファイルのような JavaScript オブジェクト
+var content = '<a id="a"><b id="b">hey!</b></a>'; // 新しいファイルの本体...
 var blob = new Blob([content], { type: "text/xml"});
 
 formData.append("webmasterfile", blob);
@@ -28,18 +38,22 @@ request.open("POST", "http://foo.com/submitform.php");
 request.send(formData);
-
Note: The fields "userfile" and "webmasterfile" both contain a file. The number assigned to the field "accountnum" is immediately converted into a string by the FormData.append() method (the field's value can be a {{ domxref("Blob") }}, {{ domxref("File") }}, or a string: if the value is neither a Blob nor a File, the value is converted to a string).
+
注: フィールド "userfile" および "webmasterfile" はどちらも、ファイルを含んでいます。フィールド "accountnum" に与えた数値は FormData.append() メソッドにより直ちに文字列へ変換されます (フィールドの値として {{ domxref("Blob") }}、 {{ domxref("File") }}、または文字列をとることができます。値が Blob でもファイルでもない場合は、文字列に変換されます)。
-

This example builds a FormData instance containing values for fields named "username", "accountnum", "userfile" and "webmasterfile", then uses the XMLHttpRequest method send() to send the form's data. The field "webmasterfile" is a {{domxref("Blob")}}. A Blob object represents a file-like object of immutable, raw data. Blobs represent data that isn't necessarily in a JavaScript-native format. The {{ domxref("File") }} interface is based on Blob, inheriting blob functionality and expanding it to support files on the user's system. In order to build a Blob you can invoke the {{domxref("Blob.Blob","Blob() constructor")}}.

+

この例では、 "username", "accountnum", "userfile", "webmasterfile" というフィールドの値を含む FormData インスタンスを構築し、 XMLHttpRequest のメソッド send() を使用してフォームのデータを送信します。 "webmasterfile" というフィールドは {{domxref("Blob")}} です。 Blob オブジェクトは、不変的な生データのファイルのようなオブジェクトを表します。 Blob は、必ずしも JavaScript に適した形式ではないデータを表します。 {{ domxref("File") }} インターフェースは Blob をベースにしており、 Blob の機能を継承し、ユーザーのシステム上のファイルをサポートするように拡張されています。 Blob を作成するには、 {{domxref("Blob.Blob","Blob() constructor")}} コンストラクターを呼び出します。

-

Retrieving a FormData object from an HTML form

+

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

-

To construct a FormData object that contains the data from an existing {{ HTMLElement("form") }}, specify that form element when creating the FormData object:

+

既存の {{ HTMLElement("form") }} のデータを含む FormData オブジェクトを構築するには、 FormData オブジェクトの作成時にその form 要素を指定します。

+ +
+

注: FormData は name 属性を使用する入力フィールドのみを使用します。

+
var formData = new FormData(someFormElement);
-

For example:

+

例:

var formElement = document.querySelector("form");
 var request = new XMLHttpRequest();
@@ -47,7 +61,7 @@ request.open("POST", "submitform.php");
 request.send(new FormData(formElement));
-

You can also append additional data to the FormData object between retrieving it from a form and sending it, like this:

+

以下のように、FormData オブジェクトをフォームより取得してから送信するまでの間に、追加のデータを付加することもできます。

var formElement = document.querySelector("form");
 var formData = new FormData(formElement);
@@ -56,11 +70,11 @@ request.open("POST", "submitform.php");
 formData.append("serialnumber", serialNumber++);
 request.send(formData);
-

This lets you augment the form's data before sending it along, to include additional information that's not necessarily user-editable.

+

これにより、必ずしもユーザーが編集可能である必要がない追加情報を含めるために、送信前にフォームデータを拡張することができます。

-

Sending files using a FormData object

+

FormData オブジェクトを使用したファイルの送信

-

You can also send files using FormData. Simply include an {{ HTMLElement("input") }} element of type file in your {{htmlelement("form")}}:

+

FormData を使用してファイルを送信することもできます。type が "file" である {{HTMLElement("input")}} 要素を、{{htmlelement("form")}} に含めます。

<form enctype="multipart/form-data" method="post" name="fileinfo">
   <label>Your email address:</label>
@@ -74,7 +88,7 @@ request.send(formData);
<div></div> -

Then you can send it using code like the following:

+

そして、以下のようなコードを使用して送信できます。

var form = document.forms.namedItem("fileinfo");
 form.addEventListener('submit', function(ev) {
@@ -100,25 +114,70 @@ form.addEventListener('submit', function(ev) {
-

Note: If you pass in a reference to the form the request method specified in the form will be used over the method specified in the open() call.

+

注: フォームへの参照を渡した場合は、 open() の呼び出しで指定したリクエストメソッドよりもフォームで指定したメソッドを優先します。

+
+ +
+

警告: FormData を使用して、{{ domxref("XMLHttpRequest") }} または {{ domxref("Fetch_API") }} を使用して、 multipart/form-data の Content-Type で POST リクエストを送信する場合 (Files や Blob をサーバーにアップロードする場合など)、リクエストの Content-Type ヘッダーを明示的に設定しないでください。そうすると、ブラウザーがリクエスト本文のフォームフィールドの区切りに使用する境界の表現で Content-Type ヘッダーを設定することができなくなります。

-

You can also append a {{ domxref("File") }} or {{ domxref("Blob") }} directly to the {{ domxref("FormData") }} object, like this:

+

以下のように、直接 {{ domxref("File") }} や {{ domxref("Blob") }} を{{ domxref("FormData") }} オブジェクトへ追加することもできます。

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

When using the {{domxref("FormData.append","append()")}} method it is possible to use the third optional parameter to pass a filename inside the Content-Disposition header that is sent to the server. When no filename is specified (or the parameter isn't supported), the name "blob" is used.

+

{{domxref("FormData.append","append()")}} メソッドを使用する際は、オプションの第 3 引数を使用して、Content-Disposition ヘッダーに含めるファイル名を渡すことができます。これはサーバーへ送信されます。ファイル名を指定しない (あるいは引数がサポートされない) 場合は、 "blob" という名前が使用されます。

+ +

formdata イベントの使用

+ +

{{domxref("FormData")}} オブジェクトよりも新しくプラットフォームに追加されたのが formdata イベントです。これは、フォームのデータを表すエントリーのリストが作成された後に {{domxref("HTMLFormElement")}} オブジェクトで発行されます。このイベントは、フォームが送信されたときに発行されますが、 {{domxref("FormData.FormData", "FormData()")}} コンストラクターが呼び出されたときにも発行されます。

+ +

これにより、 {{domxref("FormData")}} オブジェクトを formdata イベントの発行を受けてすばやく取得することができるようになり、自分でまとめる必要がなくなります。

+ +

一般的には、シンプルな formdata イベントのデモのように、 JavaScript でフォームを参照して使用します。

+ +
const formElem = document.querySelector('form');
+ +

submit イベントのハンドラーでは、 preventDefault を使用して既定のフォーム送信を停止してから、 {{domxref("FormData")}} コンストラクターを呼び出して formdata イベントを発行させます。

+ +
formElem.addEventListener('submit', (e) => {
+  // on form submission, prevent default
+  e.preventDefault();
+
+  // construct a FormData object, which fires the formdata event
+  new FormData(formElem);
+});
+ +

formdata イベントが発行されると、 {{domxref("FormDataEvent.formData")}} を使って {{domxref("FormData")}} オブジェクトにアクセスし、必要な処理を行うことができます (以下では、 {{domxref("XMLHttpRequest")}} を使ってサーバーに送信しています)。

+ +
formElem.addEventListener('formdata', (e) => {
+  console.log('formdata fired');
+
+  // Get the form data from the event object
+  let data = e.formData;
+  for (var value of data.values()) {
+    console.log(value);
+  }
+
+  // submit the data via XHR
+  let request = new XMLHttpRequest();
+  request.open("POST", "/formHandler");
+  request.send(data);
+});
+ +
+

注: formdata イベントと {{domxref("FormDataEvent")}} オブジェクトは、 Chrome ではバージョン 77 (および同等の Chromium) から、 Firefox ではバージョン 72 から利用可能です (Firefox 71で dom.formdata.event.enabled を設定することで初めて利用可能になりました)。

+
-

Submitting forms and uploading files via AJAX without FormData objects

+

FormData オブジェクトを使用せずに AJAX でフォームやファイルを送信する

-

If you want to know how to serialize and submit a form via AJAX without using FormData objects, please read this paragraph.

+

FormData オブジェクトを使用せずに、AJAX でシリアライズしたり送信したりする方法を知りたい場合は、 こちらの節を参照してください。

-

See also

+

関連情報

-- cgit v1.2.3-54-g00ecf