Flash や Java などのプラグインを使ってファイルの種類を制限する

2024-04-07

HTMLファイル入力のaccept属性とクロスブラウザ対応

HTMLファイル入力要素 <input type="file"> には、accept属性という便利な機能があります。この属性を使うことで、ユーザーがアップロードできるファイルの種類を制限することができます。

しかし、accept属性はすべてのブラウザで完全にサポートされているわけではありません。クロスブラウザ対応を考慮する場合は、いくつかの注意点があります。

accept属性の基本的な使い方

accept属性には、カンマ区切りのファイル拡張子リストを指定します。例えば、以下のコードは、画像ファイルのみを許可します。

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

許可したいファイルの種類が複数ある場合は、以下のように記述します。

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

クロスブラウザ対応における注意点

accept属性は、IE 10 以前ではサポートされていません。
古いバージョンの Safari では、accept属性が正しく機能しない場合があります。
モバイルブラウザでは、accept属性の対応状況が異なります。

これらの問題を解決するために、以下の対策を講じることをお勧めします。

accept属性と併せて、JavaScriptを使ってファイルの種類をチェックする。
すべてのブラウザで動作する代替手段を提供する。

JavaScriptによるファイルチェック

以下のコードは、accept属性で許可されているファイルのみをアップロードできるようにする JavaScript コードの例です。

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

input.addEventListener('change', () => {
  const files = input.files;

  for (const file of files) {
    const fileType = file.type;

    if (!acceptFileType(fileType)) {
      alert(`ファイル形式が不正です: ${fileType}`);
      return;
    }
  }

  // ファイル処理
});

function acceptFileType(fileType) {
  const acceptedTypes = ['image/*', 'video/*'];

  return acceptedTypes.includes(fileType);
}

代替手段の提供

すべてのブラウザで動作する代替手段として、以下のような方法があります。

Flash や Java などのプラグインを使用する。
サーバサイドでファイルの種類をチェックする。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ファイルアップロードサンプル</title>
</head>
<body>
  <h1>画像ファイルアップロード</h1>
  <p>
    <input type="file" id="file-input" accept="image/*">
  </p>
  <p id="error-message"></p>
  <script>
    const input = document.querySelector('#file-input');
    const errorMessage = document.querySelector('#error-message');

    input.addEventListener('change', () => {
      const files = input.files;

      for (const file of files) {
        const fileType = file.type;

        if (!acceptFileType(fileType)) {
          errorMessage.textContent = `ファイル形式が不正です: ${fileType}`;
          return;
        }
      }

      // ファイル処理
      // ...
    });

    function acceptFileType(fileType) {
      const acceptedTypes = ['image/*'];

      return acceptedTypes.includes(fileType);
    }
  </script>
</body>
</html>

このコードをブラウザで開き、input要素に画像ファイルをドラッグアンドドロップすると、ファイルがアップロードされます。

ポイント

accept属性で許可するファイルの種類を指定します。
JavaScriptを使って、accept属性で許可されていないファイルがアップロードされないようにチェックします。
アップロードされたファイルは、// ファイル処理 の部分で処理します。

JavaScriptによるファイルチェック

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

input.addEventListener('change', () => {
  const files = input.files;

  for (const file of files) {
    const fileType = file.type;

    if (!acceptFileType(fileType)) {
      alert(`ファイル形式が不正です: ${fileType}`);
      return;
    }
  }

  // ファイル処理
});

function acceptFileType(fileType) {
  const acceptedTypes = ['image/*', 'video/*'];

  return acceptedTypes.includes(fileType);
}

サンプルコード（PHP）

<?php

if (isset($_FILES['file'])) {
  $file = $_FILES['file'];

  if ($file['type'] !== 'image/png') {
    echo 'ファイル形式が不正です: ' . $file['type'];
    exit;
  }

  // ファイル処理
  // ...
}

?>