Days on the Moon

この記事は HTML アドベントカレンダーの 21 日目の分です。

HTML のフォームでファイルを送信するには、ファイルアップロードコントロール <input type="file"> を使います。このとき、accept 属性に MIME タイプまたは拡張子を指定することで、アップロードしてほしいファイルの種別を指定できます。PNG 画像または JPEG 画像をアップロードしてほしければ、以下のようにカンマ区切りで記述します。

<input type="file" accept="image/png, image/jpeg, .png, .jpg, .jpeg">

特殊な値として以下の三つが定義されています。これらの値も他の値と組み合わせて指定できます。

image/*

何らかの画像ファイルをアップロードしてほしいときに指定する。

video/*

何らかの動画ファイルをアップロードしてほしいときに指定する。

audio/*

何らかの音声ファイルをアップロードしてほしいときに指定する。

個別のファイル種別を指定するときは、MIME タイプと拡張子を両方組み合わせて指定することが勧められています。MIME タイプまたは拡張子、どちらかのみでファイル種別を管理しているシステムへの配慮からでしょうか。

MIME タイプにパラメータは指定できません。UTF-8 で符号化された HTML 文書のみアップロードしてほしいからといって、accept="text/html; charset=UTF-8" とは書けないのです。

accept 属性で指定できるのはあくまでもファイル名などに基づく表面的なファイル種別であり、Web ブラウザがファイルフォーマットをきちんと検証してくれるわけではありません。サーバー側でのファイルフォーマット検証を忘れないようにしましょう。

<input type="file"> にはほかにも、複数ファイル選択を可能にする multiple 属性や、デバイスのメディアキャプチャ機能を直接利用可能にする capture 属性を指定できます。capture 属性に関しては「captureでカメラ起動（知名度が低いウェブ標準ひとりAdvent Calendar 2021 – 17日目） | Ginpen.com」で紹介されているのでそちらも参照してください。なお、capture 属性はまだ HTML 標準に取り込まれていませんが、HTML Media Capture として W3C 勧告になっています。