<input type="file">

更新日
仕様 HTML Living Standard
分類 フロー・コンテンツ / フレージング・コンテンツ / インタラクティブ・コンテンツ / フォーム関連要素（リスト化、サブミット可能、リセット可能、自動大文字化と自動修正継承、ラベル付け可能） / パルパブル・コンテンツ
利用場所 フレージング・コンテンツが置ける場所
内容 無し（空要素）

input要素に type="file" を指定すると、ファイルをアップロードするための入力欄を作成できます。


<input type="file" name="example1">

<input type="file" name="example2" accept="image/*">
属性 値
任意属性（共通）
type="" 部品のタイプ file ファイルの送信欄
name="" 部品の名前 文字列 部品を識別するための名前
disabled 部品の無効化 （disabled） 値は省略可能
form="" フォームとの関連付け ID名 関連付けるform要素に指定したID名
任意属性（部品タイプに依存）
accept="" 選択可能なファイル形式 MIMEタイプ MIMEタイプでファイル形式を指定
.拡張子 拡張子でファイル形式を指定
audio/* 音声ファイルを指定
video/* 動画ファイルを指定
image/* 画像ファイルを指定
multiple 複数の選択・入力を可能にする （multiple） 値は省略可能
required 入力必須 （required） 値は省略可能
  • このタイプの入力欄では、value属性は省略しなければなりません。
  • 各属性の概要は、上記表のリンク先をご覧ください。（input要素のページにリンクしています）

どの部品タイプにどの属性を指定できるかは、下記の対応表で確認することができます。

この部品タイプの特徴

ファイルをアップロードするための入力欄です。

（実際の表示例）

このタイプの入力欄では、ファイルを選択するための参照ボタンが表示されます。（ボタン上のテキストはブラウザにより異なります）

参照ボタンをクリックすると、ファイルを選択するためのダイアログが表示されます。選択を完了してダイアログを閉じると、ファイル名が参照ボタンの横に表示されます。

  • ファイルを送信するフォームでは、form要素に method="post" と enctype="multipart/form-data" を指定しておく必要があります。
  • 送信されたファイルをサーバー側で受け取るには、その機能を持ったCGI等のプログラムが必要になります。

accept属性について

accept属性は、ファイルを送信する際にどのファイル形式が選択可能かを指定します。この属性には以下の3タイプの指定方法があります。

MIMEタイプで指定

次の例では、JPEGファイルのみが選択可能となります。

<input type="file" name="example" accept="image/jpeg">
拡張子で指定

次の例では、PDFファイルのみが選択可能となります。拡張子で指定する場合は先頭にピリオド（ . ）が必要です。

<input type="file" name="example" accept=".pdf">
大まかな種類で指定

大まかな種類で指定したい場合は、次の3つの値で指定します。

  • audio/*：音声ファイルが選択可能
  • video/*：動画ファイルが選択可能
  • image/*：画像ファイルが選択可能

次の例では、画像ファイルが選択可能となります。

<input type="file" name="example" accept="image/*">

複数の値を指定する場合は、次のようにカンマ（ , ）で区切って記述します。

<input type="file" name="example" accept="image/*, .pdf, .doc">

特定のファイル形式を指定する際には、MIMEタイプと拡張子の両方を指定することが推奨されています。次の例では、Wordのファイル形式を指定しています。

<input type="file" name="example" accept=".doc, .docx, application/msword, application/vnd.openxmlformats-officedocument.wordprocessingml.document">

multiple属性について

multiple属性は、複数のファイルが選択可能であることを指定します。

<input type="file" name="example" multiple>

対応しているブラウザでは、ダイアログ内で複数のファイルを選択できるようになります。（Windowsの場合はCtrlキーを押しながらファイルをクリックします）

  • この属性が指定されていない場合は、1つのファイルしか選択できません。

使用例

accept属性を指定した例

<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, .jpg, .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ファイル：

音声ファイル：

動画ファイル：

画像ファイル：

  • 対応しているブラウザでは、指定した形式のファイルのみがダイアログ内に表示されます。
  • サンプルのため送信できません。
multiple属性を指定した例

<form method="post" action="example.cgi" enctype="multipart/form-data">

<p>デフォルト：<input type="file" name="example6"></p>
<p>複数ファイル：<input type="file" name="example7" multiple></p>

<p><input type="submit" value="送信する"></p>

</form>
表示例

デフォルト：

複数ファイル：

  • 対応しているブラウザでは、ダイアログ内で複数のファイルを選択できるようになります。（Windowsの場合は Ctrlキーを押しながらファイルをクリック）
  • サンプルのため送信できません。