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

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

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

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

JavaScript（※要jQuery）

$(function() {
// inputタグから取得
  $('#myFile').bind('change', function() {
    var imgSize1 = this.files[0].size; //ここでファイルサイズを取得
    $('span.filesize1').text(imgSize1);
  });
});

html

<p><input type="file" name="myFile" id="myFile" /></p>
<p>ファイルサイズ：<span class="filesize1"></span> byte</p>

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

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

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

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

JavaScript（※要jQuery）

$(function() {
// imgのsrcから取得
  var imgSrc = $('img.img').attr('src');
  var imgSize2 = filesize(imgSrc);  //ここでファイルサイズを取得
  $('span.filesize2').text(imgSize2);
});
function filesize (url) {
  // http://kevin.vanzonneveld.net
  // +   original by: Enrique Gonzalez
  // +      input by: Jani Hartikainen
  // +   improved by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
  // +   improved by: T. Wild
  // %        note 1: This function uses XmlHttpRequest and cannot retrieve resource from different domain.
  // %        note 1: Synchronous so may lock up browser, mainly here for study purposes.
  // *     example 1: filesize('http://kevin.vanzonneveld.net/pj_test_supportfile_1.htm');
  // *     returns 1: '3'
  var req = this.window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();
  if (!req) {
    throw new Error('XMLHttpRequest not supported');
  }

  req.open('HEAD', url, false);
  req.send(null);

  if (!req.getResponseHeader) {
    try {
      throw new Error('No getResponseHeader!');
    } catch (e) {
      return false;
    }
  } else if (!req.getResponseHeader('Content-Length')) {
    try {
      throw new Error('No Content-Length!');
    } catch (e2) {
      return false;
    }
  } else {
    return req.getResponseHeader('Content-Length');
  }
}

html

<p><img src="ファイルURL" class="img" /></p>
<p>ファイルサイズ：<span class="filesize2"></span> byte</p>

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

参考）JavaScript filesize function – php.js

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

・サンプル

使い道

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

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

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