diff options
Diffstat (limited to 'files/ja/web')
| -rw-r--r-- | files/ja/web/api/formdata/using_formdata_objects/index.html | 109 |
1 files changed, 84 insertions, 25 deletions
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 --- -<p class="summary">The <code><a href="/en-US/docs/Web/API/FormData">FormData</a></code> object lets you compile a set of key/value pairs to send using <code><a href="/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a></code>. 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 <code>multipart/form-data</code>.</p> +<div>{{APIRef("XMLHttpRequest")}}</div> -<h2 id="Creating_a_FormData_object_from_scratch">Creating a FormData object from scratch</h2> +<p class="summary"><code><a href="/ja/docs/Web/API/FormData">FormData</a></code> オブジェクトは、<code><a href="/ja/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a></code> を使用して送信するためのキーと値のペアのセットを収集可能にします。本来はフォームデータの送信に使用することを想定していましたが、キーのついたデータを伝送するためにフォームとは独立して使用することもできます。伝送されるデータは、フォームのエンコードタイプが <code>multipart/form-data</code> に設定されている場合に、{{domxref("HTMLFormElement.submit","submit()")}} メソッドで送信する際に使用するデータと同じ形式です。</p> -<p>You can build a <code>FormData</code> object yourself, instantiating it then appending fields to it by calling its {{domxref("FormData.append","append()")}} method, like this:</p> +<h2 id="Creating_a_FormData_object_from_scratch">ゼロから FormData オブジェクトを作成する</h2> + +<p>以下のように <code>FormData</code> オブジェクトはあなた自身で作成でき、インスタンス化したら {{domxref("FormData.append","append()")}} メソッドを呼び出すことでフィールドに付加します:</p> <pre class="brush: js">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); </pre> -<div class="note"><strong>Note:</strong> The fields "userfile" and "webmasterfile" both contain a file. The number assigned to the field "accountnum" is immediately converted into a string by the <a href="/en/DOM/XMLHttpRequest/FormData#append()" title="en/XMLHttpRequest/FormData#append()"><code>FormData.append()</code></a> method (the field's value can be a {{ domxref("Blob") }}, {{ domxref("File") }}, or a string: <strong>if the value is neither a Blob nor a File, the value is converted to a string</strong>).</div> +<div class="note"><strong>注:</strong> フィールド "userfile" および "webmasterfile" はどちらも、ファイルを含んでいます。フィールド "accountnum" に与えた数値は <a href="/ja/docs/Web/API/FormData#append()"><code>FormData.append()</code></a> メソッドにより直ちに文字列へ変換されます (フィールドの値として {{ domxref("Blob") }}、 {{ domxref("File") }}、または文字列をとることができます。<strong>値が Blob でもファイルでもない場合は、文字列に変換されます</strong>)。</div> -<p>This example builds a <code>FormData</code> instance containing values for fields named "username", "accountnum", "userfile" and "webmasterfile", then uses the <code>XMLHttpRequest</code> method <a href="/en/DOM/XMLHttpRequest#send()" title="en/XMLHttpRequest#send()"><code>send()</code></a> to send the form's data. The field "webmasterfile" is a {{domxref("Blob")}}. A <code>Blob</code> 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 <code>Blob</code>, inheriting blob functionality and expanding it to support files on the user's system. In order to build a <code>Blob</code> you can invoke the {{domxref("Blob.Blob","Blob() constructor")}}.</p> +<p>この例では、 "username", "accountnum", "userfile", "webmasterfile" というフィールドの値を含む <code>FormData</code> インスタンスを構築し、 <code>XMLHttpRequest</code> のメソッド <a href="/ja/docs/Web/API/XMLHttpRequest#send()"><code>send()</code></a> を使用してフォームのデータを送信します。 "webmasterfile" というフィールドは {{domxref("Blob")}} です。 <code>Blob</code> オブジェクトは、不変的な生データのファイルのようなオブジェクトを表します。 Blob は、必ずしも JavaScript に適した形式ではないデータを表します。 {{ domxref("File") }} インターフェースは <code>Blob</code> をベースにしており、 Blob の機能を継承し、ユーザーのシステム上のファイルをサポートするように拡張されています。 <code>Blob</code> を作成するには、 {{domxref("Blob.Blob","Blob() constructor")}} コンストラクターを呼び出します。</p> -<h2 id="Retrieving_a_FormData_object_from_an_HTML_form">Retrieving a FormData object from an HTML form</h2> +<h2 id="Retrieving_a_FormData_object_from_an_HTML_form">HTML フォームから FormData オブジェクトを取り出す</h2> -<p>To construct a <code>FormData</code> object that contains the data from an existing {{ HTMLElement("form") }}, specify that form element when creating the <code>FormData</code> object:</p> +<p>既存の {{ HTMLElement("form") }} のデータを含む <code>FormData</code> オブジェクトを構築するには、 <code>FormData</code> オブジェクトの作成時にその form 要素を指定します。</p> + +<div class="note"> +<p><strong>注</strong>: FormData は name 属性を使用する入力フィールドのみを使用します。</p> +</div> <pre class="brush: js">var formData = new FormData(someFormElement); </pre> -<p>For example:</p> +<p>例:</p> <pre class="brush: js">var formElement = document.querySelector("form"); var request = new XMLHttpRequest(); @@ -47,7 +61,7 @@ request.open("POST", "submitform.php"); request.send(new FormData(formElement)); </pre> -<p>You can also append additional data to the <code>FormData</code> object between retrieving it from a form and sending it, like this:</p> +<p>以下のように、<code>FormData</code> オブジェクトをフォームより取得してから送信するまでの間に、追加のデータを付加することもできます。</p> <pre class="brush: js">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);</pre> -<p>This lets you augment the form's data before sending it along, to include additional information that's not necessarily user-editable.</p> +<p>これにより、必ずしもユーザーが編集可能である必要がない追加情報を含めるために、送信前にフォームデータを拡張することができます。</p> -<h2 id="Sending_files_using_a_FormData_object">Sending files using a FormData object</h2> +<h2 id="Sending_files_using_a_FormData_object">FormData オブジェクトを使用したファイルの送信</h2> -<p>You can also send files using <code>FormData</code>. Simply include an {{ HTMLElement("input") }} element of type <code>file</code> in your {{htmlelement("form")}}:</p> +<p><code>FormData</code> を使用してファイルを送信することもできます。type が "file" である {{HTMLElement("input")}} 要素を、{{htmlelement("form")}} に含めます。</p> <pre class="brush: html"><form enctype="multipart/form-data" method="post" name="fileinfo"> <label>Your email address:</label> @@ -74,7 +88,7 @@ request.send(formData);</pre> <div></div> </pre> -<p>Then you can send it using code like the following:</p> +<p>そして、以下のようなコードを使用して送信できます。</p> <pre class="brush: js">var form = document.forms.namedItem("fileinfo"); form.addEventListener('submit', function(ev) { @@ -100,25 +114,70 @@ form.addEventListener('submit', function(ev) { </pre> <div class="note"> -<p><strong>Note</strong>: If you pass in a reference to the form the <a href="/en-US/docs/Web/HTTP/Methods">request method</a> specified in the form will be used over the method specified in the open() call.</p> +<p><strong>注</strong>: フォームへの参照を渡した場合は、 open() の呼び出しで指定した<a href="/ja/docs/Web/HTTP/Methods">リクエストメソッド</a>よりもフォームで指定したメソッドを優先します。</p> +</div> + +<div class="warning"> +<p><strong>警告</strong>: FormData を使用して、{{ domxref("XMLHttpRequest") }} または {{ domxref("Fetch_API") }} を使用して、 <code>multipart/form-data</code> の Content-Type で POST リクエストを送信する場合 (Files や Blob をサーバーにアップロードする場合など)、リクエストの <a href="/ja/docs/Web/HTTP/Headers/Content-Type"><code>Content-Type</code></a> ヘッダーを明示的に設定しないでください。そうすると、ブラウザーがリクエスト本文のフォームフィールドの区切りに使用する境界の表現で Content-Type ヘッダーを設定することができなくなります。</p> </div> -<p>You can also append a {{ domxref("File") }} or {{ domxref("Blob") }} directly to the {{ domxref("FormData") }} object, like this:</p> +<p>以下のように、直接 {{ domxref("File") }} や {{ domxref("Blob") }} を{{ domxref("FormData") }} オブジェクトへ追加することもできます。</p> <pre class="brush: js">data.append("myfile", myBlob, "filename.txt"); </pre> -<p>When using the {{domxref("FormData.append","append()")}} method it is possible to use the third optional parameter to pass a filename inside the <code>Content-Disposition</code> header that is sent to the server. When no filename is specified (or the parameter isn't supported), the name "blob" is used.</p> +<p>{{domxref("FormData.append","append()")}} メソッドを使用する際は、オプションの第 3 引数を使用して、<code>Content-Disposition</code> ヘッダーに含めるファイル名を渡すことができます。これはサーバーへ送信されます。ファイル名を指定しない (あるいは引数がサポートされない) 場合は、 "blob" という名前が使用されます。</p> + +<h2 id="Using_a_formdata_event">formdata イベントの使用</h2> + +<p>{{domxref("FormData")}} オブジェクトよりも新しくプラットフォームに追加されたのが <a href="/ja/docs/Web/API/HTMLFormElement/formdata_event"><code>formdata</code> イベント</a>です。これは、フォームのデータを表すエントリーのリストが作成された後に {{domxref("HTMLFormElement")}} オブジェクトで発行されます。このイベントは、フォームが送信されたときに発行されますが、 {{domxref("FormData.FormData", "FormData()")}} コンストラクターが呼び出されたときにも発行されます。</p> + +<p>これにより、 {{domxref("FormData")}} オブジェクトを <code>formdata</code> イベントの発行を受けてすばやく取得することができるようになり、自分でまとめる必要がなくなります。</p> + +<p>一般的には、<a href="https://long-impatiens.glitch.me/">シンプルな formdata イベントのデモ</a>のように、 JavaScript でフォームを参照して使用します。</p> + +<pre class="brush: js">const formElem = document.querySelector('form');</pre> + +<p><a href="/ja/docs/Web/API/HTMLFormElement/submit_event"><code>submit</code> イベント</a>のハンドラーでは、 <code><a href="/ja/docs/Web/API/Event/preventDefault">preventDefault</a></code> を使用して既定のフォーム送信を停止してから、 {{domxref("FormData")}} コンストラクターを呼び出して <code>formdata</code> イベントを発行させます。</p> + +<pre class="brush: js">formElem.addEventListener('submit', (e) => { + // on form submission, prevent default + e.preventDefault(); + + // construct a FormData object, which fires the formdata event + new FormData(formElem); +});</pre> + +<p><code>formdata</code> イベントが発行されると、 {{domxref("FormDataEvent.formData")}} を使って {{domxref("FormData")}} オブジェクトにアクセスし、必要な処理を行うことができます (以下では、 {{domxref("XMLHttpRequest")}} を使ってサーバーに送信しています)。</p> + +<pre class="brush: js">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); +});</pre> + +<div class="notecard note"> +<p><strong>注</strong>: <code>formdata</code> イベントと {{domxref("FormDataEvent")}} オブジェクトは、 Chrome ではバージョン 77 (および同等の Chromium) から、 Firefox ではバージョン 72 から利用可能です (Firefox 71で <code>dom.formdata.event.enabled</code> を設定することで初めて利用可能になりました)。</p> +</div> -<h2 id="Submitting_forms_and_uploading_files_via_AJAX_without_FormData_objects">Submitting forms and uploading files via AJAX <em>without</em> <code>FormData</code> objects</h2> +<h2 id="Submitting_forms_and_uploading_files_via_AJAX_without_FormData_objects"><code>FormData</code> オブジェクトを<em>使用せずに</em> AJAX でフォームやファイルを送信する</h2> -<p>If you want to know how to serialize and submit a form via <a href="/en-US/docs/AJAX" title="/en-US/docs/AJAX">AJAX</a> <em>without</em> using FormData objects, please read <a href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Submitting_forms_and_uploading_files" title="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#Submitting_forms_and_uploading_files">this paragraph</a>.</p> +<p>FormData オブジェクトを<em>使用せず</em>に、<a href="/ja/docs/Web/Guide/AJAX">AJAX</a> でシリアライズしたり送信したりする方法を知りたい場合は、 <a href="/ja/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#submitting_forms_and_uploading_files">こちらの節</a>を参照してください。</p> -<h2 id="See_also">See also</h2> +<h2 id="See_also">関連情報</h2> <ul> - <li><a href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">Using XMLHttpRequest</a></li> + <li><a href="/ja/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">Using XMLHttpRequest</a></li> <li>{{domxref("HTMLFormElement")}}</li> <li>{{domxref("Blob")}}</li> - <li><a href="/en-US/docs/Web/JavaScript/Typed_arrays">Typed Arrays</a></li> + <li><a href="/ja/docs/Web/JavaScript/Typed_arrays">型付き配列</a></li> </ul> |