Wie validiere ich die Bildabmessungen vor dem Hochladen mit JavaScript?

Überprüfung der Bildabmessungen vor dem Hochladen mit JavaScript

Um sicherzustellen, dass Benutzer die Bildgrößenrichtlinien einhalten, ist es wichtig, die Bildbreite und -höhe vor dem Hochladen zu überprüfen .

Dateivalidierung

Ihr vorhandener Code validiert den Dateityp und die Dateigröße. Um Bilddimensionsprüfungen hinzuzufügen, müssen Sie ein Bildobjekt aus der hochgeladenen Datei erstellen.

Verwenden von createObjectURL()

Die Methode createObjectURL() in modernen Browsern ermöglicht dies um ein temporäres URL-Objekt aus der Datei zu erstellen. Anschließend können Sie das Bild asynchron mithilfe eines Image-Objekts laden:

<code class="javascript">const file = target.files[0];
const objectUrl = URL.createObjectURL(file);

const img = new Image();
img.onload = () => {
  console.log(`Width: ${img.width}, Height: ${img.height}`);
  URL.revokeObjectURL(objectUrl);
};

img.src = objectUrl;</code>

Überlegungen

• createObjectURL() wird nur in modernen Browsern wie Firefox und Chrome unterstützt , und Opera.
• Die Methode URL.revokeObjectURL() muss aufgerufen werden, um die temporäre URL freizugeben, wenn Sie fertig sind.

Demo

Sehen Sie sich hier ein Live-Beispiel an: https://jsfiddle.net/4N6D9/1/

Hinweis: Wie bereits erwähnt, ist dieser Ansatz browserspezifisch und funktioniert möglicherweise nicht auf allen Plattformen konsistent .

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