Altura y ancho de la imagen antes de cargar

Question

Estoy tratando de validar la imagen cargada por el usuario. Entonces, después de que el usuario agrega su imagen, antes de cargarla en el servidor, intenté validar las dimensiones de la imagen con el código JavaScript a continuación, pero no funcionará.

function check_image_dimensions(){
var t=document.getElementById("main_file_1");
e=t.clientWidth;

n="";
o="We could not upload your image because \n \n";
if (e<300) {
(n+="The height of the image must be greater than 300px \n";
}
if(i<300){
n+="The height of the image must be greater than 300px \n";
}

También lo intenté:

e=t.width;
i=t.height;

Pero todavía no funciona. ¿Qué estoy haciendo mal?

¡Gracias!

Answer 1

Algo como:

1) Pon la imagen en un escondido <img/> elemento

Ver este ejemplo: MDN - Uso de archivos de aplicaciones web

2) marque el tamaño (casilla delimitador) del <img/> elemento

if(img.getBoundingClientRect().width<300) ...

3) Alerta al usuario (o no)

Aquí hay una versión de trabajo: Jsfiddle.

Compatabilidad del navegador: Firefox 3.6+, Chrome 7+, IE 10+, Opera 12+