JS – File Reader API obtiene dimensiones y tamaño de file de image

Hola, estoy usando el siguiente código para get la image cargada usando 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> 

funciona muy bien y devuelve los datos de base64 de la image.

ahora me gustaría get también el tamaño del file de image y el ancho y alto de la image.

¿Es posible?

Intenté iniciar session en la console del file, pero no puedo encontrar lo que estoy buscando.

¡Cualquier ayuda appriciada muchas gracias!

¿Algo como esto?

 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); 

Versión en vivo

Actualización de la versión Live reemplazada por Fiddle, sin embargo, debido a problemas de scripts entre sitios, el tamaño ya no se recupera de manera efectiva.

No creo que JS sea capaz de get esos datos sin antes renderizar la image en la window gráfica. Es decir, no estoy familiarizado con ningún método que haga lo que pides en las bibliotecas JavaScript o JQuery. Su mejor apuesta para get datos como estos será presentar la image en la página con la capacidad de vista previa o usar un lenguaje más potente como PHP y usar una request de Ajax para get los datos que está buscando.