この記事の要点

<input type="file"> の accept 属性で受け入れるファイル拡張子 / MIME タイプを指定できる 指定方法: 拡張子 (.jpg,.png) / MIME タイプ (image/jpeg) / ワイルドカード (image/*) 複数指定はカンマ区切り (accept=&quot;.jpg,.png,image/gif&quot;) accept はあくまでヒント。OS のファイル選択ダイアログでフィルタするだけでサーバー側の検証は必須 スマホ用: capture=&quot;environment&quot; でカメラ起動、multiple で複数選択可

accept 属性とは

<input type="file"> の accept 属性は、ユーザーが選択できるファイルの種類を制限する属性です。OS のファイル選択ダイアログでフィルタがかかり、対象外のファイルは選択しづらくなります。

ただし、これはあくまでUX 上のヒントであり、ユーザーが「すべてのファイル」表示に切り替えれば回避可能。サーバー側の MIME / 拡張子チェックは必須です。

3 つの指定方法

形式	例	意味
拡張子	.jpg / .png	ドットから始まる文字列
MIME タイプ	image/jpeg / application/pdf	特定タイプを直接指定
ワイルドカード	image/* / video/* / audio/*	カテゴリ単位で許可

基本構文

<!-- 拡張子で指定 -->
<input type="file" accept=".jpg">

<!-- MIME タイプで指定 -->
<input type="file" accept="image/jpeg">

<!-- 画像ファイル全般 (ワイルドカード) -->
<input type="file" accept="image/*">

<!-- 複数指定 (カンマ区切り) -->
<input type="file" accept=".jpg,.jpeg,.png,.gif">

<!-- 拡張子と MIME を混在 -->
<input type="file" accept=".pdf,application/msword,
       application/vnd.openxmlformats-officedocument.wordprocessingml.document">

よく使う MIME タイプ早見

種類	MIME タイプ	拡張子
JPEG 画像	image/jpeg	.jpg .jpeg
PNG 画像	image/png	.png
GIF 画像	image/gif	.gif
WebP 画像	image/webp	.webp
SVG 画像	image/svg+xml	.svg
PDF	application/pdf	.pdf
CSV	text/csv	.csv
Excel (xlsx)	application/vnd.openxmlformats-officedocument.spreadsheetml.sheet	.xlsx
Word (docx)	application/vnd.openxmlformats-officedocument.wordprocessingml.document	.docx
MP4 動画	video/mp4	.mp4
MP3 音声	audio/mpeg	.mp3
ZIP	application/zip	.zip
JSON	application/json	.json

multiple 属性で複数ファイル選択

<!-- 複数の画像ファイルを同時選択可 -->
<input type="file" accept="image/*" multiple>

<!-- 動画も同時に -->
<input type="file" accept="image/*,video/*" multiple>

スマホ向け capture 属性 — カメラ起動

スマホでは capture 属性でカメラを直接起動できます。Web アプリで写真を取らせるときに便利。

<!-- リアカメラ (アウトカメラ) -->
<input type="file" accept="image/*" capture="environment">

<!-- フロントカメラ (インカメラ) -->
<input type="file" accept="image/*" capture="user">

<!-- 動画撮影 -->
<input type="file" accept="video/*" capture="environment">

JavaScript でのバリデーション

accept は選択ダイアログのフィルタに過ぎないので、選択後にクライアント側でも検証することが多い。

const input = document.querySelector('input[type="file"]');

input.addEventListener('change', (e) => {
    const file = e.target.files[0];
    if (!file) return;

    // 拡張子チェック
    const allowedExt = ['jpg', 'jpeg', 'png', 'gif'];
    const ext = file.name.split('.').pop().toLowerCase();
    if (!allowedExt.includes(ext)) {
        alert('画像ファイル (JPG/PNG/GIF) を選択してください');
        e.target.value = '';
        return;
    }

    // MIME タイプチェック
    if (!file.type.startsWith('image/')) {
        alert('画像ファイルのみアップロード可能です');
        e.target.value = '';
        return;
    }

    // サイズチェック (5MB 以下)
    const MAX_SIZE = 5 * 1024 * 1024;
    if (file.size > MAX_SIZE) {
        alert('ファイルサイズは 5MB 以下にしてください');
        e.target.value = '';
        return;
    }
});

サーバー側の検証 — 必須

クライアント側の制限は容易に回避可能。サーバー側で必ず:

• MIME タイプ (リクエストヘッダだけでなく、ファイルの実体から検出)
• 拡張子
• ファイルサイズ
• マジックナンバー (ファイル冒頭のバイト列で本物の形式を判定)
• ファイル名サニタイズ (パストラバーサル防止)

定番パターン

プロフィール画像アップロード

<label>
  プロフィール画像
  <input type="file" name="avatar"
         accept="image/jpeg,image/png,image/webp"
         required>
</label>

CSV インポート

<input type="file" name="csvfile"
       accept=".csv,text/csv,application/vnd.ms-excel">

申請書アップロード (PDF / Word)

<input type="file" name="document"
       accept=".pdf,.doc,.docx,
              application/pdf,
              application/msword,
              application/vnd.openxmlformats-officedocument.wordprocessingml.document">

FAQ

Q: accept を指定したのに違う拡張子が選べる
A: OS のダイアログでフィルタを「すべてのファイル」に切り替えると無効。クライアント / サーバー側で再検証すること。

Q: スマホでカメラが起動しない
A: capture 属性は対応ブラウザのみ。iOS Safari / Android Chrome は対応。古い WebView では非対応のことあり。

Q: 拡張子と MIME はどちらを書くべき？
A: 両方書くのが鉄則。Windows と Mac、ブラウザによって挙動が違うので念のため両方指定する。

関連

• コンテントタイプの一覧 — MIME タイプの全リスト
• input 要素の他の属性 (required / multiple / capture)
• FileReader / File API — JavaScript でファイルを読み込む