Bildhöhe und Breite vor dem Hochladen

Question

Ich versuche, das vom Benutzer hochgeladene Bild zu validieren. Nachdem der Benutzer sein Bild hinzugefügt hat, bevor ich es auf dem Server hochgeladen hatte, habe ich versucht, die Bildabmessungen mit dem folgenden JavaScript -Code zu validieren, aber es funktioniert nicht.

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

Ich habe es auch versucht:

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

Aber es funktioniert immer noch nicht. Was mache ich falsch?

Vielen Dank!

Answer 1

Etwas wie:

1) Legen Sie das Bild in einen versteckten <img/> Element

Siehe dieses Beispiel: MDN - Verwenden von Dateien aus Webanwendungen

2) Überprüfen Sie die Größe (Begrenzungskästchen) der <img/> Element

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

3) den Benutzer alarmieren (oder nicht)

Hier ist eine Arbeitsversion: Jsfiddle.

Browserkompatabilität: Firefox 3.6+, Chrome 7+, dh 10+, Opera 12+