はじめに
ファイルアップロードフォーム(input type="file")で「参照...」ボタンを押したときに、特定の拡張子のファイルだけ（たとえば*.csvファイル）を表示するようにしたいと思い、その方法を調べてみました。
input type="file"でaccept属性を指定する
以下のサイトによると、HTMLの仕様ではaccept属性を指定すると、特定の拡張子を持つファイルだけを許可するという意味になるようです。
input要素に type="file" を指定すると、ファイルアップロードコントロールになります。基本的には、このコントロールはあらゆる種類のファイルをアップロードすることができます。
しかし、たとえば写真をアップロードするシステムでは、画像以外のファイルをアップロードしても意味がありません。そのような場合、「画像だけアップロードできる」という指定をしたくなります。そのような指定をするのが、この accept属性です。たとえば、JPEG と PNG だけアップロードしてもらいたいような場合は、以下のように指定します。
＜input name="imgfile" type="file" accept="image/jpeg,image/png"＞
accept属性 | ばけらの HTML リファレンス(未完成)
csvファイルの場合は、以下のように指定します。
<input type="file" accept="text/comma-separated-values">
Opera以外のモダンブラウザがaccept属性をサポートしていない
accept属性を指定するといけるかなと思ったのですが、HTMLの仕様で規定されているaccept属性をサポートしているブラウザがほとんどないようです。僕が試した限りでは、Opera10.60のみがaccept属性をサポートしていました。
一応 htmlの仕様上は下記のような表記で指定できるはずですが
＜input type="file" name="pic" accept="image/jpeg,image/png"＞
実際に対応しているブラウザはほとんど無いようです。
ファイルアップロードのダイアログボックスで拡張子を固定するには | OKWave
