Memo

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

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

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

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

JavaScript(※要jQuery)

html

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

参考)php – how to check file size before upload in javascript – Stack Overflow

imgタグで表示している画像のファイルサイズを取得

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

JavaScript(※要jQuery)

html

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

参考)JavaScript filesize function – php.js

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

サンプル

使い道

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

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

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

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください