Altura e largura da imagem antes de enviar

Question

Estou tentando validar a imagem enviada pelo usuário. Portanto, depois que o usuário adiciona sua imagem, antes de enviá -la no servidor, tentei validar as dimensões da imagem com o código JavaScript abaixo, mas não 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";
}

Eu também tentei:

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

Mas ainda não funciona. O que estou fazendo errado?

Obrigada!

Answer 1

Algo como:

1) Coloque a imagem em um oculto <img/> elemento

Veja este exemplo: MDN - Usando arquivos de aplicativos da Web

2) Verifique o tamanho (caixa delimitadora) do <img/> elemento

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

3) Alertar o usuário (ou não)

Aqui está uma versão de trabalho: Jsfiddle.

Compatabilidade do navegador: Firefox 3.6+, Chrome 7+, ou seja, 10+, Opera 12+