HTMLでユーザーが選択できるファイルの種類を制限：accept属性、JavaScript、サーバー側検証の比較

HTMLのaccept属性は、<input type="file">要素で使用され、ユーザーがファイル選択ダイアログで選択できるファイルの種類を制限するために使用されます。これは、サーバーが受け入れるファイルの種類を指定するためにも使用できます。

構文

<input type="file" accept="mime_type1, mime_type2, ...">

例

<input type="file" accept="image/*">

この例では、ユーザーは画像ファイルのみを選択できます。

許可されるMIMEタイプ

次の表は、一般的なMIMEタイプとそれらが許可するファイルの種類を示しています。

MIMEタイプ	許可されるファイルの種類
`image/*`	画像ファイル (JPEG、PNG、GIF など)
`video/*`	ビデオファイル (MP4、MOV、AVI など)
`audio/*`	音声ファイル (MP3、WAV、OGG など)
`application/*`	アプリケーションファイル (PDF、docx、zip など)
`text/*`	テキストファイル (txt、html、css など)

複数のMIMEタイプを指定する

複数のMIMEタイプを指定するには、カンマで区切ります。

<input type="file" accept="image/*, video/*">

この例では、ユーザーは画像ファイルまたはビデオファイルを選択できます。

ワイルドカードを使用する

ワイルドカードを使用して、特定の拡張子を持つすべてのファイルを許可できます。

<input type="file" accept=".jpg,.png,.gif">

この例では、ユーザーはJPEG、PNG、またはGIF拡張子の画像ファイルのみを選択できます。

サーバー側の検証

accept属性は、クライアント側の制限のみを指定します。サーバーは、アップロードされたファイルが実際に許可されているかどうかを確認する必要があります。

<input type="file">要素には、accept属性以外にも、ユーザーがファイルを選択する際に役立つ他の属性がいくつかあります。

webkitdirectory: ユーザーがディレクトリを選択できるようにします (Chrome および Safari のみ)。
capture: ユーザーがデバイスのカメラを使用して写真を撮影できるようにします。
multiple: ユーザーが複数のファイルを選択できるようにします。

accept属性は、ユーザーがファイル選択ダイアログで選択できるファイルの種類を制限するために使用できる便利な属性です。これは、サーバーが受け入れるファイルの種類を指定するためにも使用できます。

いくつかのブラウザは、独自の拡張機能をサポートしている場合があります。
この説明は、HTML5の最新バージョンに基づいています。古いバージョンのHTMLでは、accept属性が異なる動作をする場合があります。

例 1：画像のみを許可する

<input type="file" accept="image/*" id="imageUpload">

このコードは、ユーザーが画像ファイルのみを選択できるファイル選択ダイアログを作成します。選択された画像は、imageUpload IDを持つ要素に格納されます。

例 2：ドキュメントとスプレッドシートのみを許可する

<input type="file" accept=".docx, .xlsx" id="fileUpload">

このコードは、ユーザーがdocxまたはxlsx拡張子のファイルのみを選択できるファイル選択ダイアログを作成します。選択されたファイルは、fileUpload IDを持つ要素に格納されます。

例 3：オーディオとビデオを許可する

<input type="file" accept="audio/*, video/*" id="mediaUpload">

このコードは、ユーザーがオーディオファイルまたはビデオファイルを選択できるファイル選択ダイアログを作成します。選択されたファイルは、mediaUpload IDを持つ要素に格納されます。

例 4：複数のMIMEタイプを許可する

<input type="file" accept="image/*, application/pdf" id="multiUpload">

このコードは、ユーザーが画像ファイルまたはPDFファイルを選択できるファイル選択ダイアログを作成します。選択されたファイルは、multiUpload IDを持つ要素に格納されます。

<input type="file" accept=".jpg,.png,.gif,.jpeg" id="photoUpload">

このコードは、ユーザーがJPEG、PNG、GIF、またはJPG拡張子の画像ファイルのみを選択できるファイル選択ダイアログを作成します。選択されたファイルは、photoUpload IDを持つ要素に格納されます。

これらの例は、accept属性をさまざまな方法で使用する方法を示すほんの一例です。この属性を使用して、ユーザーが選択できるファイルの種類をニーズに合わせてさらに細かく制御できます。

エラー処理はこれらの例に含まれていません。本番環境で使用する場合は、適切なエラー処理を実装する必要があります。
これらの例では、JavaScriptを使用して選択されたファイルを処理する方法を示していません。これは、別のタスクで行う必要があります。

JavaScriptを使用する

JavaScriptを使用して、ユーザーが選択したファイルのMIMEタイプを確認し、許可されているかどうかを確認できます。この方法は、よりきめ細かい制御を提供しますが、複雑さも増します。

<input type="file" id="fileUpload">

<script>
const fileUpload = document.getElementById('fileUpload');

fileUpload.addEventListener('change', function(event) {
  const file = event.target.files[0];
  const mimeType = file.type;

  if (!isAllowedMimeType(mimeType)) {
    alert('このファイルタイプは許可されていません。');
    return;
  }

  // ファイルを処理する
});

function isAllowedMimeType(mimeType) {
  const allowedMimeTypes = [
    'image/jpeg',
    'image/png',
    'image/gif',
    'application/pdf',
  ];

  return allowedMimeTypes.includes(mimeType);
}
</script>

サーバー側の検証を使用する

サーバー側でアップロードされたファイルを検証することもできます。この方法は、より安全ですが、クライアント側の制限を提供しません。

<input type="file" id="fileUpload">

<form action="/upload" method="post" enctype="multipart/form-data">
  <input type="hidden" name="csrfmiddlewaretoken" value="{{ csrf_token }}">
  <input type="file" name="file" id="fileUpload">
  <button type="submit">アップロード</button>
</form>

# views.py
def upload(request):
  if request.method == 'POST':
    uploaded_file = request.FILES['file']

    if not is_allowed_mime_type(uploaded_file.content_type):
      return HttpResponseBadRequest('このファイルタイプは許可されていません。')

    # ファイルを処理する

def is_allowed_mime_type(mime_type):
  allowed_mime_types = [
    'image/jpeg',
    'image/png',
    'image/gif',
    'application/pdf',
  ]

  return mime_type in allowed_mime_types

カスタムHTML属性を使用する

一部のブラウザでは、カスタムHTML属性を使用して、ユーザーがアップロードできるファイルの種類を制限できます。この方法は、あまり一般的ではありませんが、より柔軟なオプションを提供できます。

<input type="file" accept-custom=".jpg,.png,.gif,.jpeg" id="fileUpload">

この方法は、すべてのブラウザでサポートされているわけではないことに注意することが重要です。