y.okano blog: accept 属性でアップロードするファイルフォーマットを指定

2013年8月22日木曜日

accept 属性でアップロードするファイルフォーマットを指定

HTML5 では <input> タグの type 属性が "file" の場合に、アップロードできるファイルのフォーマットを指定する属性があります。

accept 属性を追加して以下の値をセットします。

image/*, video/*, audio/*
MIMEタイプ
ファイル拡張子

image/*, video/*, audio/* はそれぞれ画像ファイル、動画ファイル、音声ファイルだけを受け入れる値です。MIME タイプは image/png などのように更に具体的な値を設定可能です。ファイル拡張子は ".doc" や ".txt" などの用にファイルの拡張子によって受け入れるかどうかを判断するオプションです。

Mac の Safari, Firefox, Chrome で試してみたのですが、ファイルの拡張子による指定は今のところ、Chrome でしか動いていませんでした。実際には image/*, video/*, audio/* か MIME タイプを使うことになりそうです。

accept が指定されている場合には、アップロードするファイルの選択画面で、フォーマットが合わないファイルは選択不可能になります。もちろん気休め程度なので、サーバ側でのチェックは必須ですが。