クリックした画像のサイズ(バイト)やファイルタイプの取得方法

Question

質問失礼します。

タイトル通りですがどうしても方法がわかりません。
どの様に記述すればクリックした画像のサイズ(何バイト)とタイプ(jpgやpng等)を取得できるのでしょうか？
現在はこのように記述しております。

HTML

        <div class="file"><a href="#"><img src="images/sample.jpg"></a></div>
		<dl>
			dt>ファイル容量： </dt>
			<dd id="file_capa"></dd>
			<dt>ファイルタイプ： </dt>
			<dd id="file_type"></dd>
			<dt>サイズ： </dt>
			<dd id="file_size"></dd>
		</dl>

js

	$(".file a").on('click', function(){
		var $this_children = $(this).children('img');
		
		var img = new Image();
		img.src = $this_children.attr('src');
		var nw = img.width;
		var nh = img.height;
		$("#file_size").text(nw + '×' + nh + 'px');

		var fileType = img.type; //これはダメでした
		var fileCapa = img.size; //これはダメでした
		$("#file_type").text(fileType);
		$("#file_capa").text(fileCapa);
		return false;	

		function filesize(url) {
			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');
			}
		}
	});

他にfilesize(img)等も試しましたがダメでした。

参考先サイト等でも教えていただけましと助かります。

よろしくお願いいたします。

追記

製作者が自作したメソッドは記述しております。

そして
filesize(img);
や
var fileSrc= $this_children.attr('src');
var fileCapa = filesize(fileSrc);
$("#file_capa").text(fileCapa);
とした場合、画面にはfalse、
エラーは下記の内容が出ます。

[Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check

Answer 1

CORSに引っかからないならfetchしてみては？

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  [].forEach.call(document.querySelectorAll('img'),x=>{
    x.addEventListener('click',e=>{
      var t=e.target;
      fetch(t.src).then(res=>new Promise(resolve=>resolve(res.blob())).then(blob=>new Object({
      type:res.headers.get("content-type"),
      size:blob.size,
      width:t.naturalWidth,
      height:t.naturalHeight,
      }))).then(console.log);
    });
  });
});
</script>
<img src="1.jpg">
<img src="2.jpg">

Comments

[ringoame49]

ご回答いただきありがとうございます。

確かにconsole上には私の望む値が表示されていました。

しかし教えていただいた内容を100%理解できている訳ではないので教えていただいた内容を基にわからない部分は勉強し、ほかにも実装させたい機能があるので応用して使用させていただきます！

この度は本当にありがとうございましたm(__)m

Answer 2

ファイルサイズを取得する方法はここに載ってましたが、結構めんどくさそうでした
JavaScriptで画像のファイルサイズを取得する

拡張子を取得する方法は、

• ファイル名末尾から取得するだけでいいのか
• 拡張子に頼らずに正しいファイルタイプを取得したいのか

のどちらなのかによって変わってくると思いますが、いかがでしょう。

他にもこの辺が参考になりそうです
HTML5のFile APIでローカルファイル情報取得してやんよ!!!

※検索すれば結構出てきます

Comments

[ringoame49]

ご回答ありがとうございます。

私もJavaScriptで画像のファイルサイズを取得するの方は見ました。
そこでvar fileCapa = filesize(img);を試しましたがダメでした。

HTML5のFile APIでローカルファイル情報取得してやんよ!!!はローカルファイルの情報を表示するのではないのでしょうか？

私の望みはweb上にimgtタグで表示されている画像のサイズやタイプを取得し表示したいです。

タイプの取得は拡張子に頼らずに正しいファイルタイプを取得したいのかになります。

結構検索しましたが私のレベルが低いのもあり中々解決できないです。

[siruku6]

「JavaScriptで画像のファイルサイズを取得する」を見たところ、requestを投げるfilesizeというメソッドを実装しているように見えるのですが、それもすでに実装されていますか？

[ringoame49]

var fileCapa = filesize(img);
$("#file_capa").text(fileCapa);
で試していますがダメでした。

[siruku6]

あのfilesizeというメソッドは、記事の製作者が自作したメソッドなのですが、それも自分自身のコードに実装済みであれば、質問文のソースにも書いておいた方がい良いと思います。

また、もし既にエラーも確認済みであれば、エラー内容も記載しておかないと、他の方もそれ以上アドバイスするのは難しいと思います。

[ringoame49]

等もご回答ありがとうございます。

製作者が自作したメソッドは記述しております。

そして
filesize(img);
や
var fileSrc= $this_children.attr('src');
var fileCapa = filesize(fileSrc);
$("#file_capa").text(fileCapa);
とした場合、画面にはfalse、
エラーは下記のように出ます。

[Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.

[siruku6]

ここまで情報が掲載されていれば、わかる人にはわかると思います、、、
申し訳ないですが、私はこの処理の経験はないため、これ以上は力になれそうにないです、、

[ringoame49]

とんでもないです！
ご丁寧にご回答ありがとうございました！
次から質問するときはもっと細かく書きます！