using HTML5 file API to get size of all images in a class

Question

I have several images on a page, which all have the class

.imgToPrint

I want to loop through the list and get the file size for each using the file API.

I'm trying like this

$(".imgToPrint").each(function(){               
 console.log( $(this).files[0].size );
});

but I get the error Uncaught TypeError: Cannot read property '0' of undefined

how can I get the file size of each image in this class?

Did you wrap to `$(function() {});` or `$( document ).ready(function() {});` — Talgat Saribayev, Sep 26 '19 at 22:28
The `files` property is for the `` element [Web API > File](https://developer.mozilla.org/en-US/docs/Web/API/File) — Dave Anderson, Sep 26 '19 at 22:32
@Julian no, that's talking about file inputs. This question is different, it's asking about finding the size of the source file in `` tags — ADyson, Sep 26 '19 at 23:23
See [Determining image file size + dimensions via Javascript](https://stackoverflow.com/questions/1310378/determining-image-file-size-dimensions-via-javascript). — showdev, Sep 27 '19 at 00:42

score 0 · Answer 1 · answered Sep 27 '19 at 15:19

the answer was found here and I implemented it this way

$(".imgToPrint").each(function(e){   
        var srcx=$(this).attr("src");           
        console.log(srcx);
        var xhr = new XMLHttpRequest();
        xhr.open('HEAD', srcx, true);
        xhr.onreadystatechange = function(){
          if ( xhr.readyState == 4 ) {
            if ( xhr.status == 200 ) {
              console.log('Size in bytes: ' + xhr.getResponseHeader('Content-Length'));
            } else {
              console.log('ERROR');
            }
          }
        };
        xhr.send(null);
});

using HTML5 file API to get size of all images in a class

1 Answers1