Web開発のお話です。マスタメンテナンス系の画面を作る際、ローカルにあるファイルを読み込んでサーバにアップロードする、なんてことがよくあります。

そんな時はinputタグをtype="file"として使うことになりますが、このタグはデフォルトではどんな形式のファイルでも選択できてしまいます。

期待と異なる形式のファイルが送られた場合、サーバ側でそれをはじく処理も用意するとは思いますが、前もって特定のファイル形式しか受け付けない仕様とわかっているのであれば、ファイルを選択させる時点で制限を入れてあげた方がユーザーフレンドリーですよね。

その部分を制御するためにはacceptという属性を使います。

acceptの使い方

<input type="file" accept="ファイル形式">といった具合にファイル形式を指定することにより、指定した形式以外のファイルを選択させないようにできます。ファイル形式として指定できるものは次の通り。

  • ピリオド (U+002E) に続けてファイルの拡張子(例: .jpg, .png, .doc).
  • パラメーターを持たない、正しい MIME type
  • audio/* は音声ファイルを表すHTML5
  • video/* は動画ファイルを表すHTML5
  • image/* は画像ファイルを表すHTML5

引用元：input 要素 - HTML | MDN

で、色々試してみたデモはこちら（動作確認：Mac OS X Sierra Chrome）↓

See the Pen inputタグでファイル形式を限定 by diwao (@diwao) on CodePen.

ちなみに、Macだとファイル選択ダイアログの「形式」をクリックして「すべてのファイル」に変えてしまうと結局指定したもの以外も選べてしまうので、ユーザーの操作をこれで完全に制御できるというわけではありません。

とはいえデフォルトを指定しておくだけでも使い勝手の向上や誤操作防止に繋がるので、状況に応じて設定してあげると親切なのではないでしょうか。