TLで「JavaScriptで画像のファイルサイズを取得するってできるのかなー?」と流れてきたので、調べたら見つけたのでメモしておきますね。
Contents
ファイルアップロード時に取得する
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
上記2つのサンプルは以下に。
・サンプル
使い道
最初のやつはアップローダー作るときとか、あると便利ですね。
jsでアップロードできるファイルサイズを超えてないかどうかの判定に使えます。
もう一つは…うーん。。。
あ、画像だけでなく、普通のhtmlとかのファイルサイズも返すので、ファイルリストとか?
素材一覧にファイルサイズを追加したりするのに使える…かな?
何かに使うことがあるかもしれないメモでした。