<input type="file">
| ブラウザ |
|
|---|---|
| 分類 | フロー・コンテンツ / フレージング・コンテンツ / インタラクティブ・コンテンツ / フォーム関連要素（リスト化、サブミット可能、リセット可能、再関連付け可能、ラベル付け可能） / パルパブル・コンテンツ |
| 利用場所 | フレージング・コンテンツが置ける場所 |
| 内容 | 空 |
input要素に type="file" を指定すると、ファイルをアップロードするための入力欄を作成できます。
<input type="file" name="example1">
<input type="file" name="example2" accept="image/*">
| 属性 | 値 | ||
|---|---|---|---|
| 任意属性（共通） | |||
type="" |
部品のタイプ | file |
ファイルの送信欄 |
name="" |
部品の名前 | 文字列 | 部品を識別するための名前 |
disabled |
部品の無効化 | （disabled） |
値は省略可能 |
form="" |
 フォームとの関連付け |
ID名 | 関連付けるform要素に指定したID名 |
autofocus |
自動フォーカスの指定 |
（autofocus） |
値は省略可能、1つの文書に1つだけ指定可能 |
| 任意属性 | |||
accept="" |
受け入れるファイル形式 | MIMEタイプ | カンマ（ , ）区切りで複数指定可能 |
audio/* |
音声ファイルを受け入れる | ||
video/* |
動画ファイルを受け入れる | ||
image/* |
画像ファイルを受け入れる | ||
multiple |
複数ファイルの選択を可能にする |
（multiple） |
値は省略可能 |
required |
入力必須 |
（required） |
値は省略可能 |
- このタイプの入力欄では、value属性は省略しなければなりません。
type属性、name属性、disabled属性、form属性、autofocus属性の詳細については、input要素のページを参考にしてください。
このタイプの特徴
ファイルをアップロードするための入力欄です。
（実際の表示例）
このタイプの入力欄では、ファイルを選択するための参照ボタンが表示されます。（ボタン上のテキストはブラウザにより異なります）
参照ボタンをクリックすると、ファイルを選択するためのダイアログが表示されます。選択を完了してダイアログを閉じると、そのファイルへのパスが入力欄に挿入されます。（入力欄が表示されないブラウザもあります）
- ファイルを送信するフォームでは、form要素に
method="post"とenctype="multipart/form-data"を指定しておく必要があります。 - 送信されたファイルをサーバー側で受け取るには、その機能を持ったCGI等のプログラムが必要になります。
accept属性について
accept属性は、受け入れ可能なファイル形式をMIMEタイプで指定します。
次の例では、JPEGファイルのみを受け入れています。
<input type="file" name="example" accept="image/jpeg">
複数のファイル形式を受け入れる場合は、次のようにカンマ（ , ）で区切って記述します。
<input type="file" name="example" accept="image/jpeg, image/gif, image/png">
個別に指定するのではなく、大まかな系統で指定したい場合には、次の3つの値を使用することもできます。
audio/*- 音声ファイルを受け入れます。
video/*- 動画ファイルを受け入れます。
image/*- 画像ファイルを受け入れます。
次の例では、動画ファイルを受け入れています。
<input type="file" name="example" accept="video/*">
multiple属性について
multiple属性は、複数のファイルが選択可能であることを指定します。
<input type="file" name="example" multiple>
対応しているブラウザでは、ダイアログ内で複数のファイルを選択できるようになります。（Windowsの場合はCtrlキーを押しながらファイルをクリックします）
- この属性が指定されていない場合は、1つのファイルしか選択できません。
required属性について
required属性は、そのフォーム部品が入力必須であることを指定します。
<input type="file" name="example" required>
使用例
<form method="post" action="example.cgi" enctype="multipart/form-data">
<p>デフォルト：<input type="file" name="example1"></p>
<p>JPEGファイル：<input type="file" name="example2" accept="image/jpeg"></p>
<p>音声ファイル：<input type="file" name="example3" accept="audio/*"></p>
<p>動画ファイル：<input type="file" name="example4" accept="video/*"></p>
<p>画像ファイル：<input type="file" name="example5" accept="image/*"></p>
<p><input type="submit" value="送信する"></p>
</form>
- 表示例
-
デフォルト：
JPEGファイル：
音声ファイル：
動画ファイル：
画像ファイル：
- 対応しているブラウザでは、指定した形式のファイルのみがダイアログ内に表示されます。
- サンプルのため送信できません。
<form method="post" action="example.cgi" enctype="multipart/form-data">
<p>デフォルト：<input type="file" name="example1"></p>
<p>複数ファイル：<input type="file" name="example2" multiple></p>
<p><input type="submit" value="送信する"></p>
</form>
- 表示例
-
デフォルト：
複数ファイル：
- 対応しているブラウザでは、ダイアログ内で複数のファイルを選択できるようになります。（Windowsの場合は Ctrlキーを押しながらファイルをクリック）
- サンプルのため送信できません。