画像ファイルのみ受け付けるinput type="file"の実装方法

2024-04-02

画像ファイルのみを受け付ける input type="file" の実装方法

HTMLの accept 属性を使う

HTML

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

このコードは、ユーザーが選択できるファイルの種類を画像ファイルのみ（image/*）に制限します。

注意点

古いブラウザでは accept 属性をサポートしていない場合があります。
ユーザーは accept 属性を無視して、許可されていないファイルを選択できる可能性があります。

JavaScriptでファイルの種類をチェックする

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

JavaScript

const fileInput = document.getElementById('file-input');

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

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

  // 画像ファイル処理
});

このコードは、ユーザーがファイルを選択した際に、ファイルの種類をチェックし、画像ファイル以外はアップロードできないようにします。

メリット

古いブラウザでも動作します。
より厳密なファイルの種類チェックができます。

JavaScriptの知識が必要です。

画像ファイルのみを受け付ける input type="file" を実装するには、HTMLの accept 属性またはJavaScriptを使う方法があります。

どちらの方法を使うかは、ブラウザの互換性や必要な機能によって決めてください。

補足

JavaScriptでファイルの種類をチェックする方法は、他にもさまざまな方法があります。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>画像ファイルのみを受け付ける</title>
</head>
<body>
  <h1>画像ファイルのみアップロード</h1>
  <form action="/upload" method="post" enctype="multipart/form-data">
    <input type="file" id="file-input" accept="image/*">
    <button type="submit">アップロード</button>
  </form>

  <script src="script.js"></script>
</body>
</html>

JavaScript

const fileInput = document.getElementById('file-input');

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

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

  // 画像ファイル処理
});