<input type="file">

ブラウザ
  • IE
  • Cr
  • Sf
  • Fx
  • O
分類 フロー・コンテンツ / フレージング・コンテンツ / インタラクティブ・コンテンツ / フォーム関連要素リスト化サブミット可能リセット可能再関連付け可能ラベル付け可能) / パルパブル・コンテンツ
利用場所 フレージング・コンテンツが置ける場所
内容

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>

使用例

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"></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="example1"></p>
<p>複数ファイル:<input type="file" name="example2" multiple></p>

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

</form>

表示例

デフォルト:

複数ファイル:

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