files/ja/web/guide/using_formdata_objects/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145

---
title: FormData オブジェクトの利用
slug: Web/Guide/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
---
<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>