HTMLのinputタグには file や text といったものがありますが、fileを指定したときに
表示されるリストに画像だけや映像だけを表示したいと思うことがあります。
今まではJavaScriptや裏方で判別していたのですが、色々見てみると
accept
という属性があることを知りました。
常識なのかもしれませんが今まで知りませんでした。
色々と調べると対応ブラウザーに差はあるものの指定の仕方ではファイル指定の一覧で画像だけや音楽だけ表示させるということが出来るようです。
記述は簡単で
<input type="file" accept="image/">
という形になります。
ちなみに対応ブラウザはIE10以上でFirefox、Chromeは対応しています。残念ながらIE9は対応していないようです。
accept自体にもいくつか書き方があるようでMIMEを指定する方法から拡張子を指定する方法や、カンマ区切りで並べる方法などあるようです。
image/jpeg,image/png
audio/
video/
.jpg,.gif
といった記述が出来ます。
いくつか試してみたのですが書き方によって差があることもわかりました。
Firefoxの場合
accept="image/jpeg"
と記載した場合にファイルの種類として
すべてのファイル (.)
JPEG Image (.jpg)
となり、すべてのファイルが表示された状態からプルダウンで内容を絞る形になりますが
accept="image/
"
と記載した場合は
画像ファイル (
.jpe;
.jpg;.jpeg;
.gif [以下略])
すべてのファイル (.*)
となっており最初から画像のみを表示させることが出来ます。
そのため指定の仕方によって最初に表示されるものが違っています。
他のブラウザーではこういうことは無く画像のみが表示されており、プルダウンですべてのファイルを表示させるよようになっています。
ですので少し注意する必要があるかもしれません。
確認したFirefoxはVersionが26なので将来的には他のブラウザと同じ挙動になるかもしれません。
プルダウンを操作すればすべてのファイルが見えることに変わりはないですが
最初に表示されるリストが絞られているとユーザーとしてはとても選択しやすいのではないかと思います。
IE10以上をターゲットとする場合は非常に有用な属性だと思います。
地球から一刻も早くIE9以下のブラウザーが滅んで欲しいと切に願います。
HTML
