Heim > Web-Frontend > js-Tutorial > Hauptteil

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

Susan Sarandon
Freigeben: 2024-11-01 12:08:02
Original
546 Leute haben es durchsucht

How to Verify Image Dimensions Before Uploading with 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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage