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

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

HTML5でのファイル検証は可能

はい、input type="file" で選択されたファイルのサイズや種類（MIMEタイプ）を検証することは可能です。HTML5のFile APIを利用すれば、JavaScriptだけでもクライアント側の検証を実現できます。ここでは、jQueryを使った具体的な実装方法を解説します。

ファイルサイズを検証するサンプルコード

以下のコードでは、フォーム送信時に選択されたファイルが指定された上限サイズを超えていないかをチェックします。上限サイズは data-max-size 属性でバイト数として指定します。

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<form>
  <input type="file" id="myfile" data-max-size="32154" />
  <input type="submit" />
</form>

<script>
$(function(){
  $('form').submit(function(){
    var val = true;
    $('input[type=file][data-max-size]').each(function(){
      if(typeof this.files[0] !== 'undefined'){
        // data-max-size属性から上限サイズ（バイト）を取得
        var max = parseInt($(this).attr('data-max-size'), 10),
            mySize = this.files[0].size;
        val = max > mySize;
        return val;
      }
    });
    return val;
  });
});
</script>
</body>
</html>

処理のポイント

  • files[0].size：File APIのプロパティで、選択されたファイルのサイズをバイト単位で取得できます。
  • data-max-size属性：許容する最大サイズをバイト数で指定します。この例では32,154バイト（約31KB）に設定しています。
  • submitイベント：フォーム送信時に検証を行い、サイズ超過の場合は false を返すことで送信をキャンセルします。

ファイルの種類（MIMEタイプ）を検証する方法

アップロードできるファイル形式を限定したい場合は、type プロパティを組み合わせます。次のように記述すると、画像形式のみを許可できます。

var fileType = this.files[0].type; // 例: "image/png"
if(fileType !== 'image/png' && fileType !== 'image/jpeg'){
  alert('PNGまたはJPEG形式の画像を選択してください');
  val = false;
}

注意点：サーバー側での検証も必須

クライアント側の検証は、ユーザーが誤ったファイルを選択するのを防ぐなど利便性の向上に有効ですが、ブラウザ上の処理は改ざんされる可能性があります。セキュリティを確保するためには、サーバー側でも必ず同じ検証を行ってください。 クライアント側とサーバー側の両方でチェックすることで、安全なファイルアップロード機能を実現できます。

  1. Windows 11/10でタスクバーアイコンのサイズを変更する方法【デスクトップ・エクスプローラーも解説】

    Windowsの魅力のひとつは、自分の作業スタイルに合わせてさまざまなカスタマイズを行える点です。Microsoftはユーザーが求めるものを把握しており、タスクメニューやウィジェットウィンドウ、検索フィールド、UIオプションなどに、さりげなくも分かりやすい変更を加え続けています。考えてみれば、パソコンのアイコンは毎日長時間目にするもの。その大きさが快適に感じられるかどうかは、作業効率にも大きく影響します。アイコンのサイズは「ちょうどいい」状態が理想です。大きすぎると画面スペースを無駄に占有してしまいますし、小さすぎると目を凝らして確認する羽目になったり、タッチ操作でうまく押せなかったりします。

  2. Windows 10でRAMの速度・容量・タイプを確認する6つの方法を徹底解説

    ソフトウェアやアプリが自分のPCで快適に動作するかどうかを知りたいとき、Windows 10に搭載されたRAM（メモリ）の種類・容量・速度といった技術仕様を確認したくなることがあります。 特にゲーマーやゲーミングPCユーザーの方なら、ゲームがスムーズに動くかどうかを事前に確かめるためにも、RAMの詳細情報を把握しておくことが大切です。この記事では、Windows 10でRAMの速度・容量・タイプを確認する方法を、初心者にもわかりやすい手順で詳しく解説します。 Windows 10でRAMの速度・タイプ・容量を確認する方法 RAMとは？ RAM（ランダムアクセスメモリ）は、データやファイル、起