JavaScript

レシピ

フォーム

ファイル選択時にファイル情報を取得する

フォームの「ファイル選択」でファイルが選択されたときにファイル情報を取得する方法について解説します。

この記事のポイント

  • 選択したファイルのファイル名、サイズ(バイト単位)、MIMEタイプ(拡張子)、更新日の4種類を取得できる
  • ファイル形式の厳密な確認はできない

選択したファイルの情報を取得する

フォームでファイルをアップロード/送信するとき、input要素の「type=”file”」による「ファイル選択」を使用します。
選択したファイルについて、JavaScriptからは次の情報を参照することができます。

  • ファイル名
  • MIMEタイプ(拡張子)
  • ファイルサイズ(バイト単位)
  • 更新日(タイムスタンプとDateオブジェクトの2種類)

今回は解説用に以下のHTMLコードを使います。

HTMLコード例

<form method="post" action="" enctype="multipart/form-data">
  <input type="file" id="upload_file" name="upload_file">
</form>

以下のコードは入力項目「type=”file”」にイベントリスナー「change」を設定し、ファイル選択がされたらファイル情報をconsole.logメソッドで出力するように設定します。

コード例

window.addEventListener('DOMContentLoaded', function(){
  document.getElementById("upload_file").addEventListener('change', function(e){

    console.log("ファイル名:" + e.target.files[0].name); // ファイル名:pic.jpg
    console.log("ファイルサイズ:" + e.target.files[0].size); // ファイルサイズ:1834338
    console.log("MIMEタイプ:" + e.target.files[0].type); // MIMEタイプ:image/jpeg

    // 更新日をタイムスタンプから取得
    var modified_datetime = new Date(e.target.files[0].lastModified);
    console.log("最終更新日:" + modified_datetime.getFullYear() + modified_datetime.getMonth() + modified_datetime.getDate()); // 最終更新日:2020731

    // 更新日をDateオブジェクトから取得
    var modified_datetime2 = e.target.files[0].lastModifiedDate;
    console.log("最終更新日:" + modified_datetime2.getFullYear() + modified_datetime2.getMonth() + modified_datetime2.getDate()); // 最終更新日:2020731
  });
});

type=”file”」にイベントリスナーを登録したときに、引数としてファイル情報が含まれるEventオブジェクトを変数eから受け取るようにします。
選択したファイルの情報は「target.filesプロパティ」に配列形式で入っているため、ファイルが1つのときは先頭の「0」から参照できるようになります。

そこからはファイル名であればnameプロパティ、ファイルサイズならsizeプロパティのように、必要に応じて各プロパティからファイル情報を取得することができます。

ファイルの最終更新日時のみ、数値のタイムスタンプが入ったlastModifiedプロパティと、Dateオブジェクトが入ったlastModifiedDateプロパティの2種類が用意されています。
いずれもデータの型が異なるのみで日時は同じです。

Note

MIMEタイプを取得してファイルの種類(拡張子)を簡易的に判定することは可能ですが、ファイル形式の偽造をチェックするような厳密な確認はできません。
例えば、元はJPEGファイルだった画像の拡張子を「.png」に変更してファイル選択すると、プロパティの値はPNGファイルとして認識してしまいます。
ファイル形式をより正確に判定したいときは、実際にアップロードを実行する際にサーバーサイドで確認することをオススメします。

こちらの記事は役に立ちましたか?

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

コメントありがとうございます!
運営の参考にさせていただきます。