Wie erzwingt man Beschränkungen der Bildgröße mithilfe von JavaScript?

Größenbeschränkungen für Bild-Uploads mithilfe von JavaScript erzwingen

Beim Bestreben, Benutzer-Uploads zu kontrollieren, müssen Sie möglicherweise die Bildbreite überprüfen Höhe, bevor Sie sie an einen Server senden. Diese JavaScript-Funktionalität bietet eine elegante Lösung zum Filtern von Bildern, die bestimmte Kriterien erfüllen.

Um dies zu erreichen, erstellen wir mithilfe der Datei-API ein Bildobjekt aus der ausgewählten Datei. So funktioniert es:

 function checkImageDimensions(target) {
   const file = target.files[0];

   // Create an image object to access its properties
   const img = new Image();
   const objectUrl = URL.createObjectURL(file);

   img.onload = function() {
     const width = this.width;
     const height = this.height;

     if (width > 240 || height > 240) {
       alert("Image dimensions exceed maximum (240x240)");
       return false;
     } else {
       // Image meets the dimension criteria
       // Continue with the upload process
       return true;
     }
   };

   img.src = objectUrl;
 }

 // Bind the event listener to the file input
 document.getElementById("photoInput").addEventListener("change", checkImageDimensions);

In diesem Skript führen wir Folgendes aus:

1. Erstellen Sie ein Bildobjekt aus der hochgeladenen Datei.
2. Hängen Sie einen Ladeereignis-Listener an an das Bildobjekt.
3. Erhalten Sie im Load-Event-Handler die Bildabmessungen und vergleichen Sie sie mit dem angegebenen Maximum.
4. Zeigen Sie eine Warnung an, wenn die Abmessungen überschritten werden, und geben Sie an, ob das Bild akzeptiert wird oder nicht.

Dieser Ansatz stellt sicher, dass hochgeladene Bilder Ihren gewünschten Abmessungen entsprechen, was eine kontrolliertere Benutzererfahrung bietet und potenzielle Anzeigeprobleme auf Ihrer Website verhindert.

Das obige ist der detaillierte Inhalt vonWie erzwingt man Beschränkungen der Bildgröße mithilfe von JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!