Web/API/FormData/Using_FormData_Objects を更新 (#1490)

- conflicting 版の方が翻訳が充実していたので、正規版をこの版で置き換え (履歴も置き換え)
- 2021/07/10 時点の英語版に同期

1 files changed, 0 insertions, 146 deletions

diff --git a/files/ja/conflicting/web/api/formdata/using_formdata_objects/index.html b/files/ja/conflicting/web/api/formdata/using_formdata_objects/index.html
deleted file mode 100644
index f455f65eb9..0000000000
--- a/files/ja/conflicting/web/api/formdata/using_formdata_objects/index.html
+++ /dev/null
@@ -1,146 +0,0 @@
----
-title: FormData オブジェクトの利用
-slug: conflicting/Web/API/FormData/Using_FormData_Objects
-tags:
-  - Advanced
-  - Example
-  - Forms
-  - Guide
-  - HTML
-  - Web
-translation_of: Web/API/FormData/Using_FormData_Objects
-translation_of_original: Web/Guide/Using_FormData_Objects
-original_slug: Web/Guide/Using_FormData_Objects
----
-<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>
-
-<h2 id="Creating_a_FormData_object_from_scratch" name="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); // 数値 123456 は直ちに文字列 "123456" へ変換されます
-
-// HTML の file input でユーザが選択したファイル
-formData.append("userfile", fileInputElement.files[0]);
-
-// ファイルのような JavaScript オブジェクト
-var content = '&lt;a id="a"&gt;&lt;b id="b"&gt;hey!&lt;/b&gt;&lt;/a&gt;'; // 新しいファイルのボディ...
-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>注記:</strong> フィールド "userfile" および "webmasterfile" はどちらも、ファイルを含んでいます。フィールド "accountnum" に与えた数値は <a href="/ja/docs/DOM/XMLHttpRequest/FormData#append()" title="XMLHttpRequest/FormData#append()"><code>FormData.append()</code></a> メソッドにより直ちに文字列へ変換されます (フィールドの値として {{domxref("Blob")}}、{{domxref("File")}}、または文字列をとることができます: <strong>値が Blob でもファイルでもない場合は、文字列に変換されます</strong>)。</div>
-
-<p>このサンプルでは "username"、"accountnum"、"userfile"、"webmasterfile" という名前のフィールドの値を持つ <code>FormData</code> のインスタンスを作成しており、またフォームのデータを送信するために <code>XMLHttpRequest</code> の <a href="/ja/docs/DOM/XMLHttpRequest#send()" title="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()")}} コンストラクタを呼び出すことができます。</p>
-
-<h2 id="Retrieving_a_FormData_object_from_an_HTML_form" name="Retrieving_a_FormData_object_from_an_HTML_form">HTML フォームから FormData オブジェクトを取り出す</h2>
-
-<p>既存の {{HTMLElement("form")}} のデータを含む <code>FormData</code> オブジェクトを構築するために、<code>FormData</code> オブジェクトを作成する際にその form 要素を指定します:</p>
-
-<pre class="brush: js">var formData = new FormData(someFormElement);
-</pre>
-
-<p>例:</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>以下のように、<code>FormData</code> オブジェクトをフォームより取得してから送信するまでの間に、追加のデータを付加することもできます:</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>これにより、必ずしもユーザが編集可能である必要がない追加情報を含めるために、送信前にフォームデータを拡張することができます。</p>
-
-<h2 id="Sending_files_using_a_FormData_object" name="Sending_files_using_a_FormData_object">FormData オブジェクトを使用してファイルを送信する</h2>
-
-<p><code>FormData</code> を使用してファイルを送信することもできます。type が "file" である {{HTMLElement("input")}} 要素を、{{htmlelement("form")}} に含めます:</p>
-
-<pre class="brush: html">&lt;form enctype="multipart/form-data" method="post" name="fileinfo"&gt;
-  &lt;label&gt;Your email address:&lt;/label&gt;
-  &lt;input type="email" autocomplete="on" autofocus name="userid" placeholder="email" required size="32" maxlength="64" /&gt;&lt;br /&gt;
-  &lt;label&gt;Custom file label:&lt;/label&gt;
-  &lt;input type="text" name="filelabel" size="12" maxlength="32" /&gt;&lt;br /&gt;
-  &lt;label&gt;File to stash:&lt;/label&gt;
-  &lt;input type="file" name="file" required /&gt;
-  &lt;input type="submit" value="Stash the file!" /&gt;
-&lt;/form&gt;
-&lt;div&gt;&lt;/div&gt;
-</pre>
-
-<p>そして、以下のようなコードを使用して送信できます:</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.&lt;br \/&gt;";
-    }
-  };
-
-  oReq.send(oData);
-  ev.preventDefault();
-}, false);
-</pre>
-
-<div class="note">
-<p><strong>注記</strong>: フォームへの参照を渡した場合は、open() の呼び出しで指定したメソッドよりもフォームで指定したメソッドを優先します。</p>
-</div>
-
-<p>以下のように、{{domxref("FormData")}} オブジェクトへ直接 {{domxref("File")}} や {{domxref("Blob")}} を追加することもできます:</p>
-
-<pre class="brush: js">data.append("myfile", myBlob, "filename.txt");
-</pre>
-
-<p>{{domxref("FormData.append","append()")}} メソッドを使用する際は省略可能な第 3 引数を使用して、<code>Content-Disposition</code> ヘッダに含めるファイル名を渡すことができます。これはサーバへ送信されます。ファイル名を指定しない (あるいは引数がサポートされない) 場合は、"blob" という名前を使用します。</p>
-
-<p>正しいオプションを設定することで、jQuery と共に <code>FormData</code> を使用することもできます:</p>
-
-<pre class="brush: js">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,  // jQuery がデータを処理しないよう指定
-  contentType: false   // jQuery が contentType を設定しないよう指定
-});
-</pre>
-
-<h2 id="Submitting_forms_and_uploading_files_via_AJAX_without_FormData_objects" name="Submitting_forms_and_uploading_files_via_AJAX_without_FormData_objects"><code>FormData</code> オブジェクトを<em>使用せずに</em> AJAX でフォームやファイルを送信する</h2>
-
-<p>FormData オブジェクトを<em>使用せず</em>に、<a href="/ja/docs/AJAX" title="AJAX">AJAX</a> でシリアライズや送信する方法を知りたい場合は、 <a href="/ja/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Submitting_forms_and_uploading_files" title="DOM/XMLHttpRequest/Using_XMLHttpRequest#Submitting_forms_and_uploading_files">こちらの節</a>をご覧ください。</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <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="/ja/docs/Web/JavaScript/Typed_arrays">Typed Arrays</a></li>
-</ul>