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

JavaScriptのFile.sizeプロパティとは？Web APIでファイルサイズを取得する方法

File.sizeプロパティとは

JavaScriptのFile.sizeプロパティは、File Web APIに含まれる読み取り専用のプロパティで、選択されたファイルのサイズをバイト単位で返します。

ユーザーが要素やドラッグ＆ドロップでアップロードしたファイルに対して使用でき、ファイルサイズのバリデーション（例：アップロード容量の上限チェック）などに活用できます。

基本構文

file.size;

戻り値は64ビット整数（バイト数）として返されます。空のファイルの場合は「0」が返ります。

実装サンプルコード

以下は、ファイルを選択するとそのファイル名とサイズ（バイト数）を画面に表示するシンプルなサンプルコードです。

<!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: red;
}
</style>
</head>
<body>
<h1>JavaScript file.sizeプロパティ</h1>
<div class="result"></div>
<input type="file" class="fileInput" />
<h3>
上記の入力フィールドからファイルをアップロードすると、そのファイルサイズが表示されます
</h3>
<script>
let resultEle = document.querySelector(".result");
document
.querySelector(".fileInput")
.addEventListener("change", (event) => {
    resultEle.innerHTML += "ファイル名 = " + event.target.files[0].name + '<br>';
    resultEle.innerHTML += "ファイルサイズ = " + event.target.files[0].size + ' バイト';
});
</script>
</body>
</html>

コードの解説

  • document.querySelector(".fileInput")：クラス名「fileInput」を持つファイル入力要素を取得します。
  • addEventListener("change", ...)：ユーザーがファイルを選択したタイミングでイベントが発火します。
  • event.target.files[0]：選択された最初のFileオブジェクトにアクセスします。
  • .name / .size：それぞれファイル名とファイルサイズ（バイト）を取得します。

実行結果

「ファイルを選択」ボタンをクリックしてファイルを選択する前の画面：

JavaScriptのFile.sizeプロパティとは？Web APIでファイルサイズを取得する方法

「Choose file」ボタンをクリックし、任意のファイルを選択すると、以下のようにファイル名とファイルサイズが表示されます：

JavaScriptのFile.sizeプロパティとは？Web APIでファイルサイズを取得する方法

まとめ

File.sizeプロパティを使えば、JavaScriptだけで簡単にファイルサイズを取得できます。アップロード前の容量チェックや、KB・MBへの単位変換処理と組み合わせることで、より使いやすいファイルアップロード機能を実装できます。なお、Fileオブジェクトには他にもname（ファイル名）、type（MIMEタイプ）、lastModified(最終更新日時)などの便利なプロパティが用意されています。

  1. JavaScript Web APIのFile.nameプロパティとは？使い方とサンプルコードを解説

    JavaScriptのFile Web APIに含まれるFile.nameプロパティは、ファイルオブジェクトからファイル名のみを取得するためのプロパティです。このプロパティは、ファイルが保存されているフォルダのパス（ディレクトリ情報）を除いた、ファイル名だけを文字列として返します。 ユーザーが要素を使ってファイルを選択した際、そのファイル名を画面に表示したり、アップロード処理の前に入力チェックを行ったりする場面でよく利用されます。 主な特徴 読み取り専用：File.nameは変更できないため、取得のみ可能です。 パス情報は含まれない：セキュリティ上の理由から、ブラウザはローカルのフルパスを公

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

    Webアプリケーションを開発していると、「ユーザーが大きすぎるファイルをアップロードできないようにしたい」という要件によく出会います。サーバー側でのチェックも重要ですが、JavaScriptを使えばブラウザ上（クライアント側）で即座にファイルサイズを検証でき、無駄な通信やサーバーへの負荷を軽減することができます。 ポイントは、ファイル入力要素（<input type=file>）の files プロパティです。ここには選択されたファイルの情報が File オブジェクトとして格納されており、size プロパティ（バイト単位）を参照することで、アップロード前の段階でファイルサイズを取得