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

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

フォームでファイルをアップロード／送信するとき、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メソッドで出力するように設定します。

JSコード例

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

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

		// 更新日をDateオブジェクトから取得
		let 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種類が用意されています。
いずれもデータの型が異なるのみで日時は同じです。

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

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