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/*" />上記のように*を指定するとjpgやpngなどすべての形式の拡張子が選択可能になります。
指定した形式の拡張子のみを選択可能にしたい場合は以下のように設定します。
<input type="file" accept=".jpg,.png" />
<!--または-->
<input type="file" accept="image/jpg,image/png" />複数のファイルタイプを指定する場合はカンマ（,）区切りで指定します。