Altezza e larghezza dell'immagine prima di caricare

Question

Sto cercando di convalidare l'immagine caricata dall'utente. Quindi, dopo che l'utente ha aggiunto la sua immagine, prima di caricarla sul server, ho provato a convalidare le dimensioni dell'immagine con il codice JavaScript di seguito ma non funzionerà.

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";
}

Ho anche provato:

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

Ma non funziona ancora. Che cosa sto facendo di sbagliato?

Grazie!

Answer 1

Qualcosa di simile a:

1) Metti l'immagine in un nascosto <img/> elemento

Vedi questo esempio: MDN - Utilizzo di file da applicazioni Web

2) Controllare la dimensione (scatola di delimitazione) del <img/> elemento

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

3) Avviso l'utente (o no)

Ecco una versione funzionante: Jsfiddle.

Compatabilità del browser: Firefox 3.6+, Chrome 7+, IE 10+, Opera 12+