JS - File Reader API get image file size and dimensions

Question

Hi i'm using the following code to get the upload image using File Reader API:

<script type="text/javascript">
var loadImageFile = (function () {
    if (window.FileReader) {
        var oPreviewImg = null, oFReader = new window.FileReader(),
            rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i;

        oFReader.onload = function (oFREvent) {

            /*get image*/
            var _img = oFREvent.target.result;
            console.log(oFREvent.target);
            /*add img to hidden input text*/
            localStorage.photo = _img;
            oPreviewImg.src = oFREvent.target.result;
        };

        return function () {
            var aFiles = document.getElementById("imageInput").files;
            if (aFiles.length === 0) { return; }
            if (!rFilter.test(aFiles[0].type)) { 
                notify("You must select a valid image file!",3400,false); return; 
            }
            oFReader.readAsDataURL(aFiles[0]);
        }

    }

})();
</script>

<form name="uploadForm">
<p><input id="imageInput" type="file" name="myPhoto" onchange="loadImageFile();" /><br />
<input type="submit" value="Send" /></p>
<input type="hidden" id="photo_1_hidden" name="photo_1"/>
</form>

it works great and it returns the base64 data of the image.

now i would like to get also the image file size and the image width and height.

Is it possible?

I tryed to log in console the file but i can't find what i'm searching for.

Any help appriciated thanks so much!

Answer 1

Something like this?

var oPreviewImg = new Image();
oPreviewImg.onload = function(){
  console.log(this.size);
  alert("'" + this.name + "' is " + this.width + " by " + this.height + " pixels in size.");
  return true;
};

oPreviewImg.onerror = function(){
  alert("'" + this.name + "' failed to load.");
  return true;
}

oPreviewImg.src = "//placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150";

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

Live version

Update Live version replaced with Fiddle, however, due to cross site scripting concerns, the size is no longer being retrieved effectively.

Answer 2

I don't believe that JS is going to be capable of getting that data without first rendering the image to the viewport. That is to say, I am unfamiliar of any method that would do what you ask in the JavaScript, or JQuery libraries. Your best bet for getting data like that is going to be rendering the image to the page in a preview capacity or using a more powerful language like PHP and using an Ajax request to get the data you're looking for.