Wie überprüfe ich die Bildabmessungen vor dem Hochladen mit JavaScript?

Überprüfen Sie die Bildabmessungen vor dem Hochladen mit JavaScript

Um zu verhindern, dass Benutzer ungeeignete Bilder hochladen, ist es wichtig, Validierungsmaßnahmen festzulegen, bevor Bild-Uploads zugelassen werden. Dieser Artikel führt Sie durch den Prozess der Überprüfung der Breite und Höhe eines Bildes in JavaScript.

Vorhandener JavaScript-Code:

Der bereitgestellte JavaScript-Code überprüft effektiv den Dateityp und Größe des hochgeladenen Bildes. Allerdings ist die Dimensionsvalidierung noch nicht implementiert.

<code class="javascript">function checkPhoto(target) {
    if(target.files[0].type.indexOf("image") == -1) {
        document.getElementById("photoLabel").innerHTML = "File not supported";
        return false;
    }
    if(target.files[0].size > 102400) {
        document.getElementById("photoLabel").innerHTML = "Image too big (max 100kb)";
        return false;
    }
    document.getElementById("photoLabel").innerHTML = "";
    return true;
}</code>

Implementierung der Bilddimensionsvalidierung:

Um die Bilddimensionen zu überprüfen, müssen wir manuell ein Bildobjekt erstellen die hochgeladene Datei. Der folgende JavaScript-Code erledigt dies:

<code class="javascript">var _URL = window.URL || window.webkitURL;
$('#file').change(function (e) {
    var file, img;
    if ((file = this.files[0])) {
        img = new Image();
        var objectUrl = _URL.createObjectURL(file);
        img.onload = function () {
            alert(this.width + " " + this.height);
            _URL.revokeObjectURL(objectUrl);
        };
        img.src = objectUrl;
    }
});</code>

Demo und Kompatibilität:

Sie können ein funktionierendes Beispiel dieses Codes auf JSFiddle ansehen: http://jsfiddle. net/4N6D9/1/.

Es ist wichtig zu beachten, dass diese Methode nur in bestimmten Browsern unterstützt wird, hauptsächlich Firefox und Chrome.

Zusätzlicher Hinweis:

Bevor Sie die Methode URL.createObjectURL() verwenden, beachten Sie, dass sie zugunsten der Zuweisung von Streams zu HTMLMediaElement.srcObject veraltet ist. Weitere Informationen finden Sie in der offiziellen Dokumentation.

Das obige ist der detaillierte Inhalt vonWie überprüfe ich die Bildabmessungen vor dem Hochladen mit JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!