Wie kann ich vor dem Hochladen mit HTML5 und JavaScript eine Vorschau der Dateigröße und Bildabmessungen anzeigen?

Vorschau der Dateimetadaten vor dem Hochladen mit HTML5 und JavaScript

Problem:

Wie können Sie die Dateigröße und das Bild ermitteln? Breite und Höhe, bevor Sie eine Datei mit jQuery oder auf Ihre Website hochladen JavaScript?

Lösung:

Mithilfe der Datei-API von HTML5 können Sie vor dem Hochladen der Datei auf die folgenden Informationen zugreifen:

Dateigröße:

• Über die Eigenschaft file.size, die die Dateigröße zurückgibt Bytes.

Bildbreite und -höhe:

• Für Bilder können Sie die URL-API verwenden, um eine temporäre URL für den Bild-Blob und zu erstellen Laden Sie es in ein temporäres Bildelement.
• Sobald das Bild geladen ist, können Sie auf seine Breiten- und Höheneigenschaften zugreifen, bevor Sie die Objekt-URL widerrufen, um es freizugeben Speicher.

Beispiel für die Verwendung der URL-API:

Der folgende Codeausschnitt zeigt, wie eine Vorschau von Bildmetadaten mithilfe der URL-API angezeigt wird:

const readImage = file => {
  if (!(/^image\/(png|jpe?g|gif)$/).test(file.type))
    return EL_preview.insertAdjacentHTML('beforeend', `Unsupported format ${file.type}: ${file.name}<br>`);

  const img = new Image();
  img.addEventListener('load', () => {
    EL_preview.appendChild(img);
    EL_preview.insertAdjacentHTML('beforeend', `<div>${file.name} ${img.width}×${img.height} ${file.type} ${Math.round(file.size / 1024)}KB<div>`);
    window.URL.revokeObjectURL(img.src); // Free some memory
  });
  img.src = window.URL.createObjectURL(file);
};

EL_browse.addEventListener('change', ev => {
  EL_preview.innerHTML = ''; // Remove old images and data
  const files = ev.target.files;
  if (!files || !files[0]) return alert('File upload not supported');
  [...files].forEach(readImage);
});

Das obige ist der detaillierte Inhalt vonWie kann ich vor dem Hochladen mit HTML5 und JavaScript eine Vorschau der Dateigröße und Bildabmessungen anzeigen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!