Wie rufe ich Bildabmessungen für die Upload-Validierung in JavaScript ab?

Überprüfen der Bildabmessungen für das Hochladen mit Javascript

Bei der Implementierung von Bild-Upload-Formularen in Javascript ist es wichtig sicherzustellen, dass die hochgeladenen Bilder bestimmte Größenanforderungen erfüllen . In diesem Artikel wird ein häufiges Problem bei der Bildgrößenvalidierung untersucht: das Abrufen der Breite und Höhe des ausgewählten Bildes.

Das Problem

Die folgende Javascript-Funktion wurde zur Überprüfung entwickelt Dateityp und -größe, Bildabmessungen können nicht abgerufen werden:

<code class="javascript">function checkPhoto(target) {
    if(target.files[0].type.indexOf("image") == -1) {
        // Code to handle file type
    }
    if(target.files[0].size > 102400) {
        // Code to handle image size
    }
    // No code yet for image width and height
}</code>

Die Lösung

Um Bildabmessungen abzurufen, müssen wir ein Bildobjekt aus der ausgewählten Datei erstellen . Dies kann mit der Methode URL.createObjectURL() erreicht werden:

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

Dieses Code-Snippet erstellt ein Bildobjekt und lädt die ausgewählte Datei mit img.src. Sobald das Bild geladen ist, wird die Rückruffunktion img.onload ausgeführt, über die wir auf die Breite und Höhe des Bildes zugreifen können.

Kompatibilitätshinweis

Die URL.createObjectURL( )-Methode wird nicht allgemein von allen Browsern unterstützt. Es wird hauptsächlich in Firefox und Chrome unterstützt. Für andere Browser sind möglicherweise alternative Methoden zur Validierung der Bildgröße erforderlich.

Das obige ist der detaillierte Inhalt vonWie rufe ich Bildabmessungen für die Upload-Validierung in JavaScript ab?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!