Heim >Web-Frontend >js-Tutorial >Wie kann ich vor dem Hochladen mit HTML5 und JavaScript eine Vorschau der Dateigröße und Bildabmessungen anzeigen?

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

Linda Hamilton
Linda HamiltonOriginal
2024-11-26 11:51:11776Durchsuche

How Can I Preview File Size, Image Dimensions Before Uploading with HTML5 and JavaScript?

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!

Stellungnahme:
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