form要素、input要素のaccept属性

2017年8月31日追記この記事は2009年に書かれたもので、ブラウザの進化に伴い現在の状況とはだいぶ異なります。2017年に<input accept> の対応状況 2017を書いたので、より新しい情報はそちらを参照ください。

HTML4、XHTML1および1.1のform要素、input要素にはaccept属性というものがあります。(ただし、form要素の方はHTML4.01で追加。)

これはファイルアップロードを行う際、クライアント側で送信できるファイルの種類を制限できるもので、HTML4.01の仕様書には次のように書かれています。

This attribute specifies a comma-separated list of content types that a server processing this form will handle correctly. User agents may use this information to filter out non-conforming files when prompting a user to select files to be sent to the server (cf. the INPUT element when type="file").

Forms in HTML documents(W3C)

たとえば、アップロードファイルをJPEG、GIFのみにしたい場合は、次のようにします。

<input type="file" name="image" accept="image/jpeg,image/gif" />

なお、ブラウザの動作としては、仕様書に書かれているとおり、指定外のファイル送信時にエラーを起こすといったことではなく、ファイル選択リストに表示しないようなことが期待されているようです。

で、実際に主要ブラウザ(Firefox3、IE7、IE8、Opera9、Safari4)でどのような動作になるかを試してみました。(ちなみにOSはWindows XP。)

パターンとしては、

  • form要素、input要素ともにaccept属性を指定
  • form要素のみにaccept属性を指定
  • input要素のみにaccept属性を指定
  • form要素、input要素ともにaccept属性を指定しない

の4種類が考えられますが、Opera以外はいずれの場合においても何の変化もなし、つまり未対応のようです。Opera9は、「ファイルを開く」ウィンドウにおいて、「ファイルの種類」のデフォルト値がaccept属性で指定したものになります。

  • ちなみに、Linuxでもいくつか試してみましたが、いずれも未対応でした。メジャーどころでの対応はOperaのみなのでしょうか。
サムネイル画像
image/jpeg,image/gif が指定されたファイル選択フォームをOpera9で表示した様子。「ファイルの種類」のデフォルト値は1番目の指定値になります。オリジナル画像

当然のことながら、「すべてのファイル」を選択して、JPEG、GIF以外のファイルを選択しても何の警告もなくアップロードできてしまいます。

このように、そもそも対応しているブラウザが少ないこと、また対応ブラウザでも指定外のファイル送信を阻止できるわけではないため、実際にはサーバ側でのチェックが必要になるわけです。

なお、Operaの動作にみられるように、複数のMIMEタイプを指定すると、2番目以降に指定した種類のファイルを選択しにくい、または人によっては気づかない恐れすら考えられます。現状においては許可したいMIMEタイプが一つの場合を除き、あまり使わない方がよいかもしれませんね。また、たとえば写真画像の投稿がメインな掲示板において、accept="image/gif,image/jpeg" などと指定すると多くの人が不便な思いをする可能性があるので、最低でも指定する順序はよく考えた方が良さそうです。