Hauteur et largeur d'image avant le téléchargement

Question

J'essaie de valider l'image téléchargée par l'utilisateur. Donc, après que l'utilisateur a ajouté son image, avant de le télécharger sur le serveur, j'ai essayé de valider les dimensions de l'image avec le code JavaScript ci-dessous mais cela ne fonctionnera pas.

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

J'ai aussi essayé:

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

Mais cela ne fonctionne toujours pas. Qu'est-ce que je fais mal?

Merci!

Answer 1

Quelque chose comme:

1) Mettez l'image dans un caché <img/> élément

Voir cet exemple: MDN - Utilisation de fichiers à partir d'applications Web

2) cochez la taille (boîte de délimitation) du <img/> élément

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

3) Alerter l'utilisateur (ou non)

Voici une version de travail: Jsfiddle.

Compatibilité du navigateur: Firefox 3.6+, Chrome 7+, c'est-à-dire 10+, opéra 12+