HTMLの input type=file でファイルを選択した瞬間にファイルサイズを取得する方法です

Webサイトで、アップロードさせるファイルの容量制限をかけたい、という場合に使える方法です。

かつては、ファイルをサーバーにアップロードしてから、サーバー側でファイル容量をみるというのが主流でしたが、HTML5のFile APIによって、サーバーにアップしなくてもファイルの情報取得や読み込みができるようになりました。

File APIのブラウザ対応状況
https://caniuse.com/fileapi

動作サンプル(CodePen)

ファイルを選択すると、その下に容量が表示されます。

コード解説

JavaScript

$('#myfile').on('change',function(){
  $('#size_view').html('File Size: '+$(this)[0].files[0].size.toLocaleString()+' bytes');
});

ファイルが選択された瞬間に、このイベントが発火します。
選択されたファイルに関する情報が、$(this)[0].filesに入ってきます。
複数ファイルを選択した場合は、ここに複数ファイルぶんのデータが入ります。

ファイルの容量はsizeプロパティにあります。
サンプルでは、.toLocaleString()で、3桁カンマ区切り表示にしています。

他に、nameにファイル名が、typeにファイルのMIMEタイプが入ってきますので、

などに使えますね。

最終更新日: 2024-08-23