HTML5を使ってクライアント側でファイルサイズを確認する方法

HTML5以前と現在のファイルサイズチェックの違い

HTML5が登場する以前は、ファイルサイズの確認にはFlashが使われていました。しかし、現在のWebアプリケーション開発では、セキュリティやパフォーマンス、モバイル対応などの観点からFlashの使用は避けられています。

とはいえ、HTML5のFile APIを利用すれば、Flashに頼ることなくクライアント側だけでファイルサイズを簡単に取得できます。以下のように、イベントリスナーの中にコードを記述するだけで実装可能です。

if (typeof FileReader !== "undefined") {
    // files[0] は1つ目のファイルを指します
    var s = document.getElementById('myfile').files[0].size;
}

このコードでは、まずFileReaderが定義されているかどうかを判定し、ブラウザがFile APIに対応しているかを確認しています。対応している場合のみ、ファイルオブジェクトのsizeプロパティからサイズ（バイト単位）を取得できます。

イベントリスナーでファイルサイズを動的に取得する

ユーザーがファイルを選択したタイミングでサイズを取得したい場合は、ファイル入力要素（<input type="file">）に対してonchangeイベントリスナーを設定します。

document.getElementById('input').onchange = function() {
    // files[0] は1つ目のファイルを指します
    var s = document.getElementById('input').files[0].size;
    alert(s);
}

このコードを実行すると、ユーザーがファイルを選択した瞬間にそのサイズがバイト数として取得され、アラートで表示されます。

補足：より使いやすくするポイント

• 単位の変換： sizeプロパティはバイト単位で返されるため、1024で割るとKB、さらに割るとMBに変換でき、表示が分かりやすくなります。
• 複数ファイルへの対応： multiple属性を付けた入力欄では、files[1]、files[2]のようにインデックスを変えることで複数のファイルサイズを取得できます。
• バリデーションへの活用： 取得したサイズをサーバーへ送信する前にチェックすれば、アップロード上限を超えるファイルを事前に弾くことができ、UXの向上につながります。

File APIはChrome、Firefox、Edge、Safariなど主要なモダンブラウザすべてでサポートされているため、特別なプラグインなしで安全かつ手軽にクライアント側のファイルサイズチェックを実装できます。