diff options
Diffstat (limited to 'files/ja/web/api/formdata')
| -rw-r--r-- | files/ja/web/api/formdata/append/index.html | 101 | ||||
| -rw-r--r-- | files/ja/web/api/formdata/entries/index.html | 77 | ||||
| -rw-r--r-- | files/ja/web/api/formdata/formdata/index.html | 99 | ||||
| -rw-r--r-- | files/ja/web/api/formdata/index.html | 82 | ||||
| -rw-r--r-- | files/ja/web/api/formdata/keys/index.html | 77 | ||||
| -rw-r--r-- | files/ja/web/api/formdata/using_formdata_objects/index.html | 124 | ||||
| -rw-r--r-- | files/ja/web/api/formdata/values/index.html | 77 |
7 files changed, 637 insertions, 0 deletions
diff --git a/files/ja/web/api/formdata/append/index.html b/files/ja/web/api/formdata/append/index.html new file mode 100644 index 0000000000..ce9f9e731f --- /dev/null +++ b/files/ja/web/api/formdata/append/index.html @@ -0,0 +1,101 @@ +--- +title: FormData.append() +slug: Web/API/FormData/append +translation_of: Web/API/FormData/append +--- +<p>{{APIRef("XMLHttpRequest")}}</p> + +<p>インターフェイスの<code><strong>append()</strong></code>メソッドは、FormDataオブジェクト内の既存のキーに新しい値を追加するか、キーがまだ存在しない場合は追加します。</p> + +<p>{{domxref("FormData.set")}}との違いは、指定されたキーが既に存在する場合、{{domxref("FormData.set")}}はすべての既存の値を新しい値で上書きすることです。 一方、<code>append()</code>は、既存の値のセットの最後に新しい値を追加します。</p> + +<div class="note"> +<p><strong>注：このメソッドはWeb Workersで使用できます。</strong></p> +</div> + +<h2 id="Syntax">Syntax</h2> + +<p>There are two versions of this method: a two and a three parameter version:</p> + +<pre class="brush: js">formData.append(name, value); +formData.append(name, value, filename);</pre> + +<h3 id="append_Parameters" name="append()_Parameters">Parameters</h3> + +<dl> + <dt><code>name</code></dt> + <dd>The name of the field whose data is contained in <code>value</code>.</dd> + <dt><code>value</code></dt> + <dd>The field's value. This can be a {{domxref("USVString")}} or {{domxref("Blob")}} (including subclasses such as {{domxref("File")}}). If none of these are specified the value is converted to a string.</dd> + <dt><code>filename </code>{{optional_inline}}</dt> + <dd>The filename reported to the server (a {{domxref("USVString")}}), when a {{domxref("Blob")}} or {{domxref("File")}} is passed as the second parameter. The default filename for {{domxref("Blob")}} objects is "blob". The default filename for {{domxref("File")}} objects is the file's filename.</dd> +</dl> + +<div class="note"> +<p><strong>Note:</strong> If you specify a {{domxref("Blob")}} as the data to append to the <code>FormData</code> object, the filename that will be reported to the server in the "Content-Disposition" header used to vary from browser to browser.</p> +</div> + +<h3 id="Returns">Returns</h3> + +<p>Void.</p> + +<h2 id="Example">Example</h2> + +<p>The following line creates an empty <code>FormData</code> object:</p> + +<pre class="brush: js">var formData = new FormData(); // Currently empty</pre> + +<p>You can add key/value pairs to this using {{domxref("FormData.append")}}:</p> + +<pre class="brush: js">formData.append('username', 'Chris'); +formData.append('userpic', myFileInput.files[0], 'chris.jpg');</pre> + +<p>As with regular form data, you can append multiple values with the same name. For example (and being compatible with PHP's naming conventions by adding [] to the name):</p> + +<pre class="brush: js">formData.append('userpic[]', myFileInput.files[0], 'chris1.jpg'); +formData.append('userpic[]', myFileInput.files[1], 'chris2.jpg');</pre> + +<p>This technique makes it simpler to process multi-file uploads because the resultant data structure is more conducive to looping.</p> + +<p>If the sent value is different than String or Blob it will be automatically converted to String:</p> + +<pre class="brush: js">formData.append('name', true); +formData.append('name', 74); +formData.append('name', 'John'); + +formData.getAll('name'); // ["true", "74", "John"] +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('XMLHttpRequest','#dom-formdata-append','append()')}}</td> + <td>{{Spec2('XMLHttpRequest')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザの互換性">ブラウザの互換性</h2> + +<div class="hidden">このページの互換性テーブルは、構造化データから生成されます。 データに貢献したい場合は、<a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>をチェックして、プルリクエストを送信してください。</div> + +<div class="hidden"></div> + +<div class="hidden"></div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{domxref("XMLHTTPRequest")}}</li> + <li><a href="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="Using XMLHttpRequest">Using XMLHttpRequest</a></li> + <li><a href="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects" title="DOM/XMLHttpRequest/FormData/Using_FormData_objects">Using FormData objects</a></li> + <li>{{HTMLElement("Form")}}</li> +</ul> diff --git a/files/ja/web/api/formdata/entries/index.html b/files/ja/web/api/formdata/entries/index.html new file mode 100644 index 0000000000..9e9369f4a1 --- /dev/null +++ b/files/ja/web/api/formdata/entries/index.html @@ -0,0 +1,77 @@ +--- +title: FormData.entries() +slug: Web/API/FormData/entries +tags: + - API + - FormData + - Iterator + - Method + - Reference + - XMLHttpRequest API +translation_of: Web/API/FormData/entries +--- +<p>{{APIRef("XMLHttpRequest")}}</p> + +<p><code><strong>FormData.entries()</strong></code> メソッドは、 {{jsxref("Iteration_protocols",'iterator')}} を返し、このオブジェクトに含まれる全ての キー/バリュー ペアを通過できるようにします。 各ペアのキーは {{domxref("USVString")}} オブジェクトで、 {{domxref("USVString")}} 、または {{domxref("Blob")}} のいずれかの値。</p> + +<div class="note"> +<p><strong>Note</strong>: このメソッドは <a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a> で使用できます。</p> +</div> + +<h2 id="構文">構文</h2> + +<pre class="syntaxbox notranslate">formData.entries();</pre> + +<h3 id="返り値">返り値</h3> + +<p>{{jsxref("Iteration_protocols","iterator")}} を返します。</p> + +<h2 id="例">例</h2> + +<pre class="brush: js;highlight:[7] notranslate">// テストの FormData オブジェクトを作成 +var formData = new FormData(); +formData.append('key1', 'value1'); +formData.append('key2', 'value2'); + +// キー/バリュー ペアの表示 +for(var pair of formData.entries()) { + console.log(pair[0]+ ', '+ pair[1]); +} +</pre> + +<p>結果は次のとおりです:</p> + +<pre class="notranslate">key1, value1 +key2, value2</pre> + +<h2 id="仕様">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">ステータス</th> + <th scope="col">備考</th> + </tr> + <tr> + <td>{{SpecName('XMLHttpRequest','#dom-formdata','entries() (as iterator<>)')}}</td> + <td>{{Spec2('XMLHttpRequest')}}</td> + <td>初回定義</td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザー実装状況">ブラウザー実装状況</h2> + + + +<p>{{Compat("api.FormData.entries")}}</p> + +<h2 id="関連項目">関連項目</h2> + +<ul> + <li>{{domxref("XMLHTTPRequest")}}</li> + <li><a href="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="Using XMLHttpRequest">Using XMLHttpRequest</a></li> + <li><a href="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects" title="DOM/XMLHttpRequest/FormData/Using_FormData_objects">Using FormData objects</a></li> + <li>{{HTMLElement("Form")}}</li> +</ul> diff --git a/files/ja/web/api/formdata/formdata/index.html b/files/ja/web/api/formdata/formdata/index.html new file mode 100644 index 0000000000..04c74264b2 --- /dev/null +++ b/files/ja/web/api/formdata/formdata/index.html @@ -0,0 +1,99 @@ +--- +title: FormData() +slug: Web/API/FormData/FormData +tags: + - API + - Constructor + - FormData + - Reference + - XHR + - XMLHttpRequest +translation_of: Web/API/FormData/FormData +--- +<p>{{APIRef("XMLHttpRequest")}}</p> + +<p><code><strong>FormData()</strong></code> コンストラクターは、新しい {{domxref("FormData")}} オブジェクトを生成します。</p> + +<div class="note"> +<p><strong>Note</strong>: このメソッドは <a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a> で使用できます。</p> +</div> + +<h2 id="構文">構文</h2> + +<pre class="brush: js notranslate"><code>var formData = new FormData(</code><code>form</code><code>)</code></pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<dl> + <dt><code>form </code>{{optional_inline}}</dt> + <dd>HTML の {{HTMLElement("form")}} 要素です。これが指定されたとき、{{domxref("FormData")}} オブジェクトは、その各要素の name プロパティをキーに、それらの送信される値を値として使い、フォームの現在のキーと値が設定されます。ファイルからの入力内容は、エンコードもされます。</dd> +</dl> + +<h2 id="例">例</h2> + +<p>次の行は、空の <code>FormData</code> オブジェクトを生成します:</p> + +<pre class="brush: js notranslate">var formData = new FormData(); // Currently empty</pre> + +<p>{{domxref("FormData.append")}} を使って、これにキーと値の組を追加することができます:</p> + +<pre class="brush: js notranslate">formData.append('username', 'Chris'); +</pre> + +<p>または、<code>FormData</code> オブジェクトを生成するときにオプションの <code><em>form</em></code> 引数を指定することにより、指定したフォームの値を設定することができます:</p> + +<pre class="brush: html notranslate"><form id="myForm" name="myForm"> + <div> + <label for="username">Enter name:</label> + <input type="text" id="username" name="username"> + </div> + <div> + <label for="useracc">Enter account number:</label> + <input type="text" id="useracc" name="useracc"> + </div> + <div> + <label for="userfile">Upload file:</label> + <input type="file" id="userfile" name="userfile"> + </div> + <input type="submit" value="Submit!"> +</form> +</pre> + +<div class="note"> +<p><strong>Note</strong>: 正しく選択されたフォーム コントロールだけが FormData に含まれます。つまり、name 属性を持ち、disabled ではなく、checked (ラジオボタンやチェックボックス) または selected (選択リストのひとつ以上のオプション) であるものです。</p> +</div> + +<pre class="brush: js notranslate">let myForm = document.getElementById('myForm'); +let formData = new FormData(myForm);</pre> + +<h2 id="仕様書">仕様書</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('XMLHttpRequest','#dom-formdata','FormData()')}}</td> + <td>{{Spec2('XMLHttpRequest')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザーの対応">ブラウザーの対応</h2> + + + +<p>{{Compat("api.FormData.FormData")}}</p> + +<h2 id="関連情報">関連情報</h2> + +<ul> + <li>{{domxref("XMLHTTPRequest")}}</li> + <li><a href="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="Using XMLHttpRequest">Using XMLHttpRequest</a></li> + <li><a href="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects" title="DOM/XMLHttpRequest/FormData/Using_FormData_objects">Using FormData objects</a></li> + <li>{{HTMLElement("Form")}}</li> +</ul> diff --git a/files/ja/web/api/formdata/index.html b/files/ja/web/api/formdata/index.html new file mode 100644 index 0000000000..66b2d5f073 --- /dev/null +++ b/files/ja/web/api/formdata/index.html @@ -0,0 +1,82 @@ +--- +title: FormData +slug: Web/API/FormData +tags: + - API + - FormData + - Interface + - Reference + - XMLHttpRequest +translation_of: Web/API/FormData +--- +<p>{{APIRef("XMLHttpRequest")}}</p> + +<p><strong><code>FormData</code></strong> インターフェイスは、{{domxref("XMLHttpRequest.send()")}} メソッドを用いることで簡単に送信が可能な、フォームフィールドおよびそれらの値から表現されるキーと値のペアのセットを簡単に構築する手段を提供します。これは、エンコーディングタイプを <code>"multipart/form-data"</code> に設定した場合にフォームが使用するものと同じ形式を使用します。</p> + +<p><code>FormData</code> を実装したオブジェクトは、{{domxref('FormData.entries()', 'entries()')}} の代わりに {{jsxref("Statements/for...of", "for...of")}} 構造の内部で直接使用できます。<code>for (var p of myFormData)</code> は <code>for (var p of myFormData.entries())</code> と等価です。</p> + +<div class="note"> +<p><strong>注記</strong>: この機能は <a href="/ja/docs/Web/API/Web_Workers_API">Web Workers</a> で使用できます。</p> +</div> + +<h2 id="Constructor" name="Constructor">コンストラクタ</h2> + +<dl> + <dt>{{domxref("FormData.FormData","FormData()")}}</dt> + <dd>新しい <code>FormData</code> オブジェクトを作成します。</dd> +</dl> + +<h2 id="Methods" name="Methods">メソッド</h2> + +<dl> + <dt>{{domxref("FormData.append()")}}</dt> + <dd><code>FormData</code> オブジェクト内の既存のキーに新たな値を追加するか、キーが存在しない場合はキーを追加します。</dd> + <dt>{{domxref("FormData.delete()")}}</dt> + <dd><code>FormData</code> オブジェクトからキーと値のペアを削除します。</dd> + <dt>{{domxref("FormData.entries()")}}</dt> + <dd>オブジェクトに含まれているすべてのキーと値のペアを走査できるようにするため、{{jsxref("Iteration_protocols","iterator")}} を返します。</dd> + <dt>{{domxref("FormData.get()")}}</dt> + <dd><code>FormData</code> オブジェクトから、指定したキーに関連付けられた最初の値を返します。</dd> + <dt>{{domxref("FormData.getAll()")}}</dt> + <dd><code>FormData</code> から、指定したキーに関連付けられたすべての値の配列を返します。</dd> + <dt>{{domxref("FormData.has()")}}</dt> + <dd><code>FormData</code> オブジェクトがあるキーと値のペアを持っているかを示す真偽値を返します。</dd> + <dt>{{domxref("FormData.keys()")}}</dt> + <dd>オブジェクト内に存在するキーと値のペアから、すべてのキーを走査できるようにするための {{jsxref("Iteration_protocols", "iterator")}} を返します。</dd> + <dt>{{domxref("FormData.set()")}}</dt> + <dd><code>FormData</code> オブジェクト内の既存のキーに新たな値を設定するか、キーが存在しない場合はキーと値のペアを追加します。</dd> + <dt>{{domxref("FormData.values()")}}</dt> + <dd>オブジェクト内に存在するキーと値のペアから、すべての値を走査できるようにするための {{jsxref("Iteration_protocols", "iterator")}} を返します。</dd> +</dl> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様書</th> + <th scope="col">策定状況</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName('XMLHttpRequest','#interface-formdata','FormData')}}</td> + <td>{{Spec2('XMLHttpRequest')}}</td> + <td>XHR 仕様書で FormData を定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザ実装状況</h2> + +<div class="hidden">このページの互換表は構造化データから生成されます。データに貢献したい場合は <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックし、プルリクエストを送信してください。</div> + +<p>{{Compat("api.FormData")}}</p> + +<h2 id="See_also" name="See_also">関連文書</h2> + +<ul> + <li>{{domxref("XMLHTTPRequest")}}</li> + <li><a href="/ja/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest">XMLHttpRequest の利用</a></li> + <li><a href="/ja/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#Using_FormData_objects">FormData オブジェクトの利用</a></li> + <li>{{HTMLElement("Form")}}</li> +</ul> diff --git a/files/ja/web/api/formdata/keys/index.html b/files/ja/web/api/formdata/keys/index.html new file mode 100644 index 0000000000..0e9fd69673 --- /dev/null +++ b/files/ja/web/api/formdata/keys/index.html @@ -0,0 +1,77 @@ +--- +title: FormData.keys() +slug: Web/API/FormData/keys +tags: + - API + - FormData + - Iterator + - Method + - Reference + - XMLHttpRequest API +translation_of: Web/API/FormData/keys +--- +<p>{{APIRef("XMLHttpRequest")}}</p> + +<p><code><strong>FormData.keys()</strong></code> メソッドは、 {{jsxref("Iteration_protocols",'iterator')}} を返し、このオブジェクトに含まれる全てのキーを通過できるようにします。キーは {{domxref("USVString")}} オブジェクトです。</p> + +<div class="note"> +<p><strong>Note</strong>: このメソッドは <a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a> で使用できます。</p> +</div> + +<h2 id="構文">構文</h2> + +<pre class="syntaxbox notranslate">formData.keys();</pre> + +<h3 id="返り値">返り値</h3> + +<p>{{jsxref("Iteration_protocols","iterator")}} を返します。</p> + +<h2 id="例">例</h2> + +<pre class="brush: js;highlight:[7] notranslate">// テストの FormData オブジェクトを作成 +var formData = new FormData(); +formData.append('key1', 'value1'); +formData.append('key2', 'value2'); + +// キーを表示 +for (var key of formData.keys()) { + console.log(key); +} +</pre> + +<p>結果は次のとおりです:</p> + +<pre class="notranslate">key1 +key2</pre> + +<h2 id="仕様">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">ステータス</th> + <th scope="col">備考</th> + </tr> + <tr> + <td>{{SpecName('XMLHttpRequest','#dom-formdata','keys() (as iterator<>)')}}</td> + <td>{{Spec2('XMLHttpRequest')}}</td> + <td>初回定義</td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザー実装状況">ブラウザー実装状況</h2> + + + +<p>{{Compat("api.FormData.keys")}}</p> + +<h2 id="関連項目">関連項目</h2> + +<ul> + <li>{{domxref("XMLHTTPRequest")}}</li> + <li><a href="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="Using XMLHttpRequest">Using XMLHttpRequest</a></li> + <li><a href="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects" title="DOM/XMLHttpRequest/FormData/Using_FormData_objects">Using FormData objects</a></li> + <li>{{HTMLElement("Form")}}</li> +</ul> diff --git a/files/ja/web/api/formdata/using_formdata_objects/index.html b/files/ja/web/api/formdata/using_formdata_objects/index.html new file mode 100644 index 0000000000..52693dd61d --- /dev/null +++ b/files/ja/web/api/formdata/using_formdata_objects/index.html @@ -0,0 +1,124 @@ +--- +title: FormData オブジェクトの使用 +slug: Web/API/FormData/Using_FormData_Objects +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> + +<h2 id="Creating_a_FormData_object_from_scratch">Creating a FormData object from scratch</h2> + +<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> + +<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" + +// HTML file input, chosen by user +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... +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); +</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> + +<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> + +<h2 id="Retrieving_a_FormData_object_from_an_HTML_form">Retrieving a FormData object from an HTML form</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> + +<pre class="brush: js">var formData = new FormData(someFormElement); +</pre> + +<p>For example:</p> + +<pre class="brush: js">var formElement = document.querySelector("form"); +var request = new XMLHttpRequest(); +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> + +<pre class="brush: js">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);</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> + +<h2 id="Sending_files_using_a_FormData_object">Sending files using a FormData object</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> + +<pre class="brush: html"><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> +</pre> + +<p>Then you can send it using code like the following:</p> + +<pre class="brush: js">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); +</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> +</div> + +<p>You can also append a {{ domxref("File") }} or {{ domxref("Blob") }} directly to the {{ domxref("FormData") }} object, like this:</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> + +<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> + +<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> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/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> +</ul> diff --git a/files/ja/web/api/formdata/values/index.html b/files/ja/web/api/formdata/values/index.html new file mode 100644 index 0000000000..6f2ffd1dce --- /dev/null +++ b/files/ja/web/api/formdata/values/index.html @@ -0,0 +1,77 @@ +--- +title: FormData.values() +slug: Web/API/FormData/values +tags: + - API + - FormData + - Iterator + - Method + - Reference + - XMLHttpRequest API +translation_of: Web/API/FormData/values +--- +<p>{{APIRef("XMLHttpRequest")}}</p> + +<p><code><strong>FormData.values()</strong></code> メソッドは {{jsxref("Iteration_protocols",'iterator')}} を返し、このオブジェクトに含まれる全ての値を通過できるようにします。値は {{domxref("USVString")}} または {{domxref("Blob")}} オブジェクトです。</p> + +<div class="note"> +<p><strong>Note</strong>: このメソッドは <a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a> で使用できます。</p> +</div> + +<h2 id="構文">構文</h2> + +<pre class="syntaxbox notranslate">formData.values();</pre> + +<h3 id="返り値">返り値</h3> + +<p>{{jsxref("Iteration_protocols","iterator")}} を返します。</p> + +<h2 id="例">例</h2> + +<pre class="brush: js;highlight:[7] notranslate">// テストの FormData オブジェクトを作成 +var formData = new FormData(); +formData.append('key1', 'value1'); +formData.append('key2', 'value2'); + +// 値を表示 +for (var value of formData.values()) { + console.log(value); +} +</pre> + +<p>結果は次のとおりです:</p> + +<pre class="notranslate">value1 +value2</pre> + +<h2 id="仕様">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">ステータス</th> + <th scope="col">備考</th> + </tr> + <tr> + <td>{{SpecName('XMLHttpRequest','#dom-formdata','values() (as iterator<>)')}}</td> + <td>{{Spec2('XMLHttpRequest')}}</td> + <td>初回定義</td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザー実装状況">ブラウザー実装状況</h2> + + + +<p>{{Compat("api.FormData.values")}}</p> + +<h2 id="関連項目">関連項目</h2> + +<ul> + <li>{{domxref("XMLHTTPRequest")}}</li> + <li><a href="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="Using XMLHttpRequest">Using XMLHttpRequest</a></li> + <li><a href="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects" title="DOM/XMLHttpRequest/FormData/Using_FormData_objects">Using FormData objects</a></li> + <li>{{HTMLElement("Form")}}</li> +</ul> |