JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptでアップロード時のファイルサイズを検証する方法

Webアプリケーションを開発していると、「ユーザーが大きすぎるファイルをアップロードできないようにしたい」という要件によく出会います。サーバー側でのチェックも重要ですが、JavaScriptを使えばブラウザ上（クライアント側）で即座にファイルサイズを検証でき、無駄な通信やサーバーへの負荷を軽減することができます。

ポイントは、ファイル入力要素（<input type="file">）の files プロパティです。ここには選択されたファイルの情報が File オブジェクトとして格納されており、size プロパティ（バイト単位）を参照することで、アップロード前の段階でファイルサイズを取得できます。

サンプルコード

以下は、アップロード時にJavaScriptでファイルサイズを検証する完全なサンプルコードです。この例では、4MB（4096KB）を超えるファイルのアップロードをブロックしています。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .result {
        font-size: 18px;
        font-weight: 500;
        color: blueviolet;
    }
</style>
</head>
<body>
<h1>アップロード時のファイルサイズ検証</h1>
<input type="file" class="file" onchange="validateFile()" />
<div class="result"></div>
<h3>上のファイル入力欄からファイルを選択してください</h3>
<script>
    let resEle = document.querySelector(".result");
    let fileEle = document.querySelector(".file");
    function validateFile() {
        // ファイルが選択されているか確認
        if (fileEle.files.length) {
            // バイト単位のサイズを取得し、KBに変換
            let fileSizeKB = Math.round(fileEle.files[0].size / 1024);
            if (fileSizeKB > 4096) {
                resEle.innerHTML = "ファイルが大きすぎるためアップロードできません";
            } else {
                resEle.innerHTML = "ファイルはアップロードできます。サイズ = " + fileSizeKB + " KB";
            }
        }
    }
</script>
</body>
</html>

コードの解説

  • files.length のチェック： ファイルが実際に選択されたかどうかを確認します。何も選択されていない状態で誤って処理が実行されるのを防ぎます。
  • size プロパティ： 選択されたファイルのサイズをバイト単位で返します。1024で割ることでKB単位に変換しています。
  • サイズ判定： 4096KB（4MB）より大きい場合は警告メッセージを表示し、それ以外の場合はアップロード可能な旨とファイルサイズを表示します。

実行結果

JavaScriptでアップロード時のファイルサイズを検証する方法

「ファイルを選択」ボタンをクリックしてファイルを選択すると、検証結果が画面に表示されます。

JavaScriptでアップロード時のファイルサイズを検証する方法

このように、クライアント側でのファイルサイズ検証は非常にシンプルに実装できます。ただし、ブラウザ側のチェックはあくまでユーザビリティ向上のためのものです。悪意あるリクエストを防ぐため、必ずサーバー側でも同様のサイズ検証を行うようにしてください。

  1. 【初心者向け】JavaScriptのFileとFileReaderを使ってファイルを読み込む方法

    JavaScriptにおけるFileとFileReaderとは？ JavaScriptでは、<input type=file>要素を使うことで、ユーザーにローカルファイルを選択させることができます。選択されたファイルはFileオブジェクトとして取得でき、ファイル名・サイズ・MIMEタイプなどの基本情報へアクセス可能です。 さらに、FileReaderオブジェクトを利用すれば、選択されたファイルの中身を非同期で読み込み、テキストやデータURLとして扱うことができます。 サンプルコード 以下は、JavaScriptでFileとFileReaderを使用して、ファイルの詳細情報を表示し

  2. JavaScriptをHTMLファイルに埋め込む方法をわかりやすく解説

    JavaScriptをHTMLファイルに埋め込む方法は、大きく分けて2つあります。<script>タグ内に直接コードを記述する「インライン方式」と、src属性で外部の.jsファイルを読み込む「外部ファイル方式」です。 ここでは、両方の方法を組み合わせた具体的なサンプルコードを紹介します。 サンプルコード <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <meta name="viewport&quo