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

HTML5のinput type=fileでファイルサイズを検証する方法

HTML5ではFile APIを利用することで、フォーム送信前にクライアント側でファイルサイズをチェックできます。<input type="file">要素のfilesプロパティにアクセスすると、選択されたファイルの情報（sizeプロパティ＝バイト単位のファイルサイズ）を取得できます。

ここでは、data-max-size属性で最大サイズを指定し、jQueryを使って送信時に検証する実装例を紹介します。

サンプルコード：ファイルサイズの検証

以下のコードを実行すると、フォーム送信時にファイルサイズが上限値（32,154バイト）を超えていないかチェックされます。上限を超えている場合は、送信がキャンセルされます。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>ファイルサイズの検証</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
  <form>
    <p><label for="myfile">ファイルを選択してください（上限 約31KB）：</label>
    <input type="file" id="myfile" data-max-size="32154" /></p>
    <p><input type="submit" value="送信" /></p>
  </form>

  <script>
    $(function(){
      $('form').submit(function(){
        var val = true;

        // data-max-size 属性を持つ全てのfile入力を検証
        $('input[type=file][data-max-size]').each(function(){
          if(typeof this.files[0] !== 'undefined'){
            var max = parseInt($(this).data('max-size'), 10),
                mySize = this.files[0].size;
            val = max > mySize; // サイズが上限以内ならtrue
            return val;
          }
        });

        return val; // falseの場合はフォーム送信を中止
      });
    });
  </script>
</body>
</html>

コードのポイント

  • files[0].size：選択された最初のファイルのサイズをバイト数で取得します。ファイルが未選択の場合はthis.files[0]がundefinedになるため、その判定を行っています。
  • data-max-size属性：HTML側で上限サイズを宣言的に設定できるため、JavaScriptを変更せずに複数のファイル入力へ適用できます。取得には.data('max-size')を使用します。
  • 戻り値による制御：submitイベントハンドラでfalseを返すと、フォームの送信がキャンセルされます。

注意点

クライアント側での検証はユーザー体験の向上に役立ちますが、改ざんされる可能性があるため、サーバーサイドでも必ずファイルサイズの検証を行ってください。両方でチェックすることで、より安全なアップロード処理を実現できます。

  1. 画像ファイルのサイズを小さくする方法|画質を保ちながら軽量化するテクニック

    以前、エクスプローラーのメール送信オプションや「Image Resizer for Windows」というデスクトップアプリを使って画像ファイルのサイズを縮小する方法をご紹介しました。どちらも優れた方法ですが、画像を最適化するアプローチは他にもいくつかあります。また、多くのサイトではペイント(Paint)の使用を推奨していますが、実際に試してみると画質が大幅に低下してしまうため、おすすめできません。 まず理解しておきたいのは、画像サイズを縮小する手法の中には画質が低下してしまうものがあるという点です。Web表示用であれば問題ないことも多いですが、印刷用途には向きません。これは一般的に、画像の解

  2. HTML5のレスポンシブ対応とは？Webデザインにおける応答性の重要性を解説

    HTML5は、最新かつ人気の高いWebデザイン言語として、デザイン業界に大きな変革をもたらしました。従来のHTMLと比較したとき、HTML5を特別な存在にしている最大の要因こそが「レスポンシブ（応答性）」です。 Webページのレスポンシブ性とは、ページがブラウザ上に読み込まれた後、閲覧に使われたデバイス（PC、スマートフォン、タブレットなど）に応じて、適切な出力・表示を行う能力のことを指します。 旧来のHTMLには多くの制約があり、それが新バージョン誕生のきっかけとなりました。当時のWebデザイナーには、変化するテクノロジーに合わせて柔軟にページを作り込む自由度がなかったのです。 最新のテ