JavaScriptで画像のファイルサイズを取得する

TLで「JavaScriptで画像のファイルサイズを取得するってできるのかなー？」と流れてきたので、調べたら見つけたのでメモしておきますね。

Contents

ファイルアップロード時に取得する

obj.files[0] で <input type=”file” /> を使ってファイルを選択した時のファイルサイズを取得出来ます。

inputタグから画像を読むのにjQuery使ってるだけなので、jQueryなしでもやろうと思えばいけます。

imgタグで表示しているファイルサイズの場合はちょっと複雑です。
HttpRequestをなげてheadを読む、という方法らしいです。

画像のsrcを読んだり、ファイルサイズを書き出すのにjQuery使ってるだけなので、function filesize()自体はjQueryなしでも大丈夫です。
試しにurlだけを指定して叩いてみたんですが、上手くできませんでした。

上記２つのサンプルは以下に。

最初のやつはアップローダー作るときとか、あると便利ですね。
jsでアップロードできるファイルサイズを超えてないかどうかの判定に使えます。

もう一つは…うーん。。。
あ、画像だけでなく、普通のhtmlとかのファイルサイズも返すので、ファイルリストとか？
素材一覧にファイルサイズを追加したりするのに使える…かな？

何かに使うことがあるかもしれないメモでした。