zukucode
主にWEB関連の情報を技術メモとして発信しています。

HTML ファイル選択ダイアログで選択可能なファイルタイプを指定する

HTMLのファイル選択ダイアログで、選択できるファイルの種類を指定する方法を紹介します。

例えばcsvファイルのみ選択可能にしたい場合や、画像ファイルのみを選択させたい場合などがあります。

以下のようにファイル選択のコントロールのaccept属性に選択可能なファイルタイプを指定します。

ファイルタイプは拡張子またはMIMEタイプ1(メディアタイプ)で指定します。

csvファイルのみ選択可能にする場合は以下のように設定します。

<input type="file" accept=".csv" />

Google Chromeなど特定のブラウザでtext/csvの指定が効かない場合がありますので、.csvの指定方法で行う必要があります。

<input type="file" accept=".csv" />
<input type="file" accept="text/csv" />

画像ファイルのみを選択可能にする場合は以下のように設定します。

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

上記のように*を指定するとjpgpngなどすべての形式の拡張子が選択可能になります。

指定した形式の拡張子のみを選択可能にしたい場合は以下のように設定します。

<input type="file" accept=".jpg,.png" />
<!--または-->
<input type="file" accept="image/jpg,image/png" />

複数のファイルタイプを指定する場合はカンマ(,)区切りで指定します。

  • 1. MIMEタイプについてはwikipediaに詳しくまとめられています。


関連記事