Wie kann ich Dateigröße, Bildbreite und -höhe ermitteln, bevor ich eine Datei mit HTML5 und JavaScript hochlade?

Dateigröße, Bildbreite und -höhe vor dem Hochladen ermitteln

Das Ermitteln der Dateigröße und der Bildabmessungen vor dem Hochladen ist für die Validierung und Verwaltung von Einsendungen unerlässlich. So erreichen Sie dies mit HTML5 und JavaScript:

Verwendung der HTML5-Datei-API

Die Datei-API bietet einen Mechanismus für den Zugriff auf Informationen über vom Benutzer ausgewählte Dateien. Dies kann genutzt werden, um Dateigröße, Bildhöhe und -breite abzurufen. Betrachten Sie das folgende Beispiel:

const browseInput = document.getElementById('browse');
const previewContainer = document.getElementById('preview');

const handleFileSelection = (event) => {
  previewContainer.innerHTML = '';
  const files = event.target.files;

  if (!files || files.length === 0) {
    alert('No files selected!');
    return;
  }

  for (const file of files) {
    // Check if the file is an image
    if (!file.type.startsWith('image/')) {
      previewContainer.insertAdjacentHTML('beforeend', `Unsupported format: ${file.name}<br>`);
      continue;
    }

    // Create an image element to calculate width and height
    const img = new Image();
    img.onload = () => {
      previewContainer.appendChild(img);
      const fileInfo = `
        <div>
          ${file.name}
          ${img.width} × ${img.height}
          ${file.type}
          ${Math.round(file.size / 1024)} KB
        </div>
      `;
      previewContainer.insertAdjacentHTML('beforeend', fileInfo);
    };

    // Load the image and release the URL when done
    img.src = URL.createObjectURL(file);
  }
};

browseInput.addEventListener('change', handleFileSelection);

Weitere Möglichkeiten

Mit diesem Ansatz können Sie vor dem Hochladen Dateigröße, Bildbreite und -höhe ermitteln und so eine bessere Kontrolle über akzeptierte Dateitypen und -abmessungen erhalten. Darüber hinaus können Sie diese Informationen zu Validierungs- und Anzeigezwecken verwenden, z. B. um vor der Übermittlung eine Vorschau der ausgewählten Bilder bereitzustellen.

Das obige ist der detaillierte Inhalt vonWie kann ich Dateigröße, Bildbreite und -höhe ermitteln, bevor ich eine Datei mit HTML5 und JavaScript hochlade?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!