ファイルアップロードライブラリを使用してファイル形式を制限する

2024-04-02

HTML の <input type="file"> でファイル形式を制限する方法

この制限は、HTML の <input type="file"> 要素の accept 属性を使用して設定できます。accept 属性には、許可するファイル形式の MIME タイプまたは拡張子をカンマ区切りで指定します。

MIME タイプは、ファイル形式を識別するための標準的な方法です。例えば、画像ファイルには image/jpeg や image/png などの MIME タイプが割り当てられています。

以下の例では、画像ファイルのみアップロードできるように accept 属性を設定しています。

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

この設定の場合、ユーザーは JPEG 形式または PNG 形式のファイルのみ選択できます。

拡張子による制限

拡張子は、ファイル名の末尾に付加される文字列です。例えば、image.jpg というファイル名のファイルは、JPEG 形式のファイルであることが分かります。

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

複数のファイル形式を許可したい場合は、許可するファイル形式をカンマ区切りで指定します。

<input type="file" accept="image/jpeg, image/png, text/plain">

注意点

accept 属性は、ブラウザの互換性に注意する必要があります。古いブラウザでは、accept 属性をサポートしていない場合があります。
accept 属性は、あくまでもユーザーインターフェース上の制限であり、サーバー側でもファイル形式のチェックを行う必要があります。

以下のサンプルコードは、accept 属性を使用してファイル形式を制限する方法を示しています。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ファイルアップロード</title>
</head>
<body>
  <h1>ファイルアップロード</h1>
  <form action="upload.php" method="post" enctype="multipart/form-data">
    <input type="file" name="file" accept="image/jpeg, image/png">
    <input type="submit" value="アップロード">
  </form>
</body>
</html>

まとめ

accept 属性を使用して、<input type="file"> 要素でアップロードできるファイル形式を制限することができます。これは、Webサイトで取り扱うファイルの種類を制御する上で重要な機能です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ファイルアップロード</title>
</head>
<body>
  <h1>ファイルアップロード</h1>
  <form action="upload.php" method="post" enctype="multipart/form-data">
    <input type="file" name="image" accept="image/jpeg, image/png">
    <input type="file" name="text" accept="text/plain">
    <input type="file" name="file" accept="image/jpeg, image/png, text/plain">
    <input type="submit" value="アップロード">
  </form>
</body>
</html>

このサンプルコードでは、以下の3つのファイルアップロードフィールドが用意されています。

image: JPEG 形式または PNG 形式の画像ファイルのみアップロード可能
text: テキストファイル（拡張子 .txt）のみアップロード可能
file: 画像ファイルとテキストファイルのみアップロード可能

このサンプルコードを参考に、ご自身のWebサイトでファイルアップロード機能を実装してみてください。

accept 属性以外のファイル形式制限方法

JavaScriptを使用して、ユーザーが選択したファイルの形式をチェックし、許可されていないファイル形式の場合は警告を表示したり、アップロードをキャンセルしたりすることができます。

以下のサンプルコードは、JavaScriptを使用して画像ファイルのみアップロードできるようにする例です。

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

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

fileInput.addEventListener('change', (event) => {
  const file = event.target.files[0];
  const fileType = file.type;

  if (!fileType.startsWith('image/')) {
    alert('画像ファイルのみアップロードできます。');
    fileInput.value = '';
  }
});
</script>