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に詳しくまとめられています。

関連記事

  • webpack postcssを導入する

    webpackでpostcssを導入してautoprefixerなどを行います。postcss-loaderはwebpackでpostcssを行うために必要です。postcssの設定ファイルを作成しま...


  • webpack lessをImportしてビルドする

    htmlやbodyなどに適用するベースのクラスを外部のlessファイルに実装して、スタイルをサイト全体に適用したい場合があります。外部のlessファイルをモジュールとしてImportしてwebpack...


  • webpack-dev-serverでhttpsでのアクセスを可能にする方法

    webpack-dev-serverでhttpsでのアクセスを可能にする方法を紹介します。外部APIのテストや、メディアデバイスのテストなどで、開発中のlocalhostをhttpsにする必要があると...


  • ExtractTextPluginでcssファイルを出力する

    webpackのプラグインExtractTextPluginを使って、ビルドされたjsファイルからstyleの部分を抽出してcssファイルで出力します。extract-text-webpack-plu...


  • webpackの設定を開発環境と本番環境で変更する

    webpack.config.jsで本番環境でのビルドのみコードを圧縮するなどの処理を設定したい場合があります。webpackの設定を開発環境と本番環境で変更する方法を紹介します。cross-envと...


  • webpack-dev-serverで開発サーバーを起動する

    webpack-dev-serverで開発サーバーを起動します。vueファイル(単一ファイルコンポーネント)をwebpackでビルドページで紹介したwebpack.config.jsにdevServe...


  • webpack モジュールのパスを絶対パスで指定する方法

    自分で作成したモジュールをインポートするときはインポートするファイルを基準に相対パスで指定する必要があります。フォルダ構成によっては深く階層を辿らないといけないので、フォルダ構成が変わってしまうと大変...


  • webフォントがIE11で表示されない場合の対処法

    FontAwesomeなどのwebフォントがなぜかIE11のみ表示されないことがありました。直接の詳しい原因はわかりませんが、htaccessで以下のように記載してキャッシュコントロールしているとうま...


  • Vuex 厳格(strict)モードでエラーになるよくある原因

    Vuexの厳格(strict)モードでエラーになってしまう原因でよくあるパターンです。stateに格納した配列をソートして表示するときに、stateの値をcomputedやgettersでそのままソー...


  • Vuex stateを作成して各コンポーネントで参照する

    実際にstoreを作成して、各コンポーネントでその値を参照できるようにします。mutations.jsにstateのオブジェクトを定義します。stateがアプリケーション全体の状態を管理します。