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
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
|
---
title: 'HTML 属性: accept'
slug: Web/HTML/Attributes/accept
tags:
- Accept
- Attribute
- File
- HTML
- Input
- Reference
translation_of: Web/HTML/Attributes/accept
---
<p>{{HTMLSidebar}}</p>
<p class="summary"><span class="seoSummary"><strong><code>accept</code></strong> 属性は、値としてカンマ区切りでファイル種別または{{anch("Unique file type specifiers", "固有ファイル種別指定子")}}を取り、どのファイル種別を受け入れるかを記述します。</span> accept プロパティは {{HTMLElement("input/file", "file")}} 型の {{htmlelement("input")}} 要素のプロパティです。もとは {{htmlelement("form")}} 要素で対応していましたが、 HTML5 で削除され、 {{HTMLElement("input/file", "file")}} に変更されました。</p>
<p>与えられたファイル種別は複数の方法で識別される可能性があるため、特定の種別のファイルが必要な場合には、型指定子の完全なセットを提供したり、ワイルドカードを使用して任意の形式の型が許容されることを示したりすると便利です。</p>
<p>例えば、 Microsoft Word ファイルを識別できる方法は何通りもありますので、 Word ファイルを受け付けるサイトは <code><input></code> を次のように使用するかもしれません。</p>
<pre class="brush: html notranslate"><input type="file" id="docpicker"
accept=".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"></pre>
<p>一方、メディアファイルを受け入れる場合は、そのメディア種別の任意の形式を含めるようにしたいかもしれません。</p>
<pre class="brush: html notranslate"><input type="file" id="soundFile" accept="audio/*">
<input type="file" id="videoFile" accept="video/*">
<input type="file" id="imageFile" accept="image/*"></pre>
<p><code>accept</code> 属性は、選択されたファイルの種別を検証するものではありません。これはブラウザーがユーザーに対して正しいファイル種別を選択できるようにするためのガイドをするためのヒントを提供するだけです。ユーザーがファイルセレクターのオプションを切り替え、これを上書きして任意のファイルを選択し、不正なファイル種別を選択することは (ほとんどの場合) 可能です。</p>
<p>このため、期待される要件をサーバー側で検証するようにしてください。</p>
<h2 id="Examples" name="Examples">例</h2>
<p>ファイル入力型に設定された場合、ネイティブファイルピッカーが開いたときに、正しいファイル種別のファイルのみを選択できるようにする必要があります。ほとんどのオペレーティングシステムでは、条件に合わず選択できないファイルが薄く表示されます。</p>
<div id="simple_example">
<pre class="brush: html notranslate"><p>
<label for="soundFile">Select an audio file:</label>
<input type="file" id="soundFile" accept="audio/*">
</p>
<p>
<label for="videoFile">Select a video file:</label>
<input type="file" id="videoFile" accept="video/*">
</p>
<p>
<label for="imageFile">Select some images:</label>
<input type="file" id="imageFile" accept="image/*" multiple>
</p></pre>
<p>{{EmbedLiveSample('simple_example', '100%', 200)}}</p>
<p>なお、最後の例では複数の画像を選択することができます。詳しくは <code><a href="multiple">multiple</a></code> 属性を参照してください。</p>
</div>
<h2 id="Unique_file_type_specifiers" name="Unique_file_type_specifiers">固有ファイル種別指定子</h2>
<p><strong>固有ファイル種別指定子</strong>は文字列で、ユーザーが {{HTMLElement("input")}} 要素の <code>file</code> 型で選択することができるファイルの種類を記述します。それぞれの固有ファイル種別記述子は、以下の形のうちの一つを取ります。</p>
<ul>
<li>ピリオド (".") 文字から始まる有効なファイル拡張子で、大文字小文字の区別をしないもの。例えば、 <code>.jpg</code>, <code>.pdf</code>, <code>.doc</code> などです。</li>
<li>有効な MIME タイプの文字列で、拡張子なしのもの。</li>
<li>文字列 <code>audio/*</code> は「任意の音声ファイル」を意味します。</li>
<li>文字列 <code>video/*</code> は「任意の映像ファイル」を意味します。</li>
<li>文字列 <code>image/*</code> は「任意の画像ファイル」を意味します。</li>
</ul>
<p><code>accept</code> 属性は、カンマ区切りの1つ以上の固有ファイル種別指定子を含む文字列を値として取ります。例えば、標準的な画像形式と PDF ファイルの両方を含む、画像として表示できるコンテンツを必要とするファイルピッカーは、次のようになります。</p>
<pre class="brush: html notranslate"><input type="file" accept="image/*,.pdf"></pre>
<h2 id="Using_file_inputs" name="Using_file_inputs">file 入力の使用</h2>
<h3 id="A_basic_example" name="A_basic_example">基本的な例</h3>
<pre class="brush: html notranslate"><form method="post" enctype="multipart/form-data">
<div>
<label for="file">Choose file to upload</label>
<input type="file" id="file" name="file" multiple>
</div>
<div>
<button>Submit</button>
</div>
</form></pre>
<div class="hidden">
<pre class="brush: css notranslate">div {
margin-bottom: 10px;
}</pre>
</div>
<p>これは次のような出力を生成します。</p>
<p>{{EmbedLiveSample('A_basic_example', 650, 60)}}</p>
<div class="note">
<p><strong>メモ</strong>: この例は GitHub でも見ることができます。 — <a href="https://github.com/mdn/learning-area/blob/master/html/forms/file-examples/simple-file.html">ソースコード</a>と<a href="https://mdn.github.io/learning-area/html/forms/file-examples/simple-file.html">ライブ実行</a>を確認してください。</p>
</div>
<p>ユーザーの端末やオペレーティングシステムが何であろうと、ファイル入力には、ユーザーがファイルを選択するためのファイルピッカーダイアログを開くボタンが用意されす。</p>
<p>上記のように <code><a href="multiple">multiple</a></code> 属性を含めることで、複数のファイルを一度に選択できるようになります。ユーザーは、選択したプラットフォームが許す任意の方法でファイルピッカーから複数のファイルを選択することができます (例えば、<kbd>Shift</kbd> キーまたは <kbd>Control</kbd> キーを押しながらクリックするなど)。 <code><input></code> ごとに1つのファイルのみを選択させたい場合は、 <code>multiple</code> 属性を省略してください。</p>
<h3 id="Limiting_accepted_file_types" name="Limiting_accepted_file_types">受け付けるファイル種別の制限</h3>
<p>多くの場合は、ユーザーが任意の種別のファイルを選択できるようにするのではなく、特定の種別のファイルを選択できるようにしたいものです。例えば、ファイル入力でユーザーがプロフィール画像をアップロードできる場合、 {{Glossary("JPEG")}} や {{Glossary("PNG")}} などのウェブ互換の画像形式を選択させたいと思うでしょう。/p>
</p><p>許容されるファイル種別は、 {{htmlattrxref("accept","input/file")}} 属性で許容されるファイル拡張子や MIME タイプのカンマ区切りのリストを取ることで指定することができます。いくつかの例を示します。</p>
<ul>
<li><code>accept="image/png"</code> または <code>accept=".png"</code> — PNG ファイルを受け付ける。</li>
<li><code>accept="image/png, image/jpeg"</code> または <code>accept=".png, .jpg, .jpeg"</code> — PNG または JPEG ファイルを受け付ける。</li>
<li><code>accept="image/*"</code> — <code>image/*</code> MIME タイプで任意のファイルを受け付ける (また、多くのモバイル端末では、これを使用するとユーザーにカメラで写真を撮影させることができる。)</li>
<li><code>accept=".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"</code> — MS Word 文書と思しきすべてのファイルを受け付ける。</li>
</ul>
<p>もっと完全な例を見てみましょう。</p>
<pre class="brush: html notranslate"><form method="post" enctype="multipart/form-data">
<div>
<label for="profile_pic">Choose file to upload</label>
<input type="file" id="profile_pic" name="profile_pic"
accept=".jpg, .jpeg, .png">
</div>
<div>
<button>Submit</button>
</div>
</form></pre>
<div class="hidden">
<pre class="brush: css notranslate">div {
margin-bottom: 10px;
}</pre>
</div>
<p>{{EmbedLiveSample('Limiting_accepted_file_types', 650, 60)}}</p>
<h2 id="Specifications" name="Specifications">仕様書</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">仕様書</th>
<th scope="col">状態</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('HTML WHATWG', 'input.html#attr-input-accept', 'accept attribute')}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
</tr>
<tr>
<td>{{SpecName('HTML5.1', 'sec-forms.html#attr-input-accept', 'accept attribute')}}</td>
<td>{{Spec2('HTML5.1')}}</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>
<p>{{Compat("html.elements.attribute.accept")}}</p>
<h2 id="See_also" name="See_also">関連情報</h2>
<ul>
<li><a href="/ja/docs/Using_files_from_web_applications">ウェブアプリケーションからのファイルの使用</a></li>
<li><a href="/ja/docs/Web/API/File">File API</a></li>
</ul>
|
