Heim > Web-Frontend > js-Tutorial > Wie erhalte ich Dateigröße und Bildabmessungen vor dem Hochladen mit JavaScript?

Wie erhalte ich Dateigröße und Bildabmessungen vor dem Hochladen mit JavaScript?

Mary-Kate Olsen
Freigeben: 2024-11-25 12:39:10
Original
863 Leute haben es durchsucht

How to Get File Size and Image Dimensions Before Upload with JavaScript?

Dateigröße und Bildabmessungen vor dem Hochladen mit jQuery oder JavaScript

Um die Dateigröße, Bildbreite und -höhe vor dem Hochladen auf eine Website zu ermitteln, verwenden Sie die Datei-API bereitgestellt durch HTML5 und JavaScript.

Verwendung der URL-API

Die Blob-Objekte werden als URLs für Bilder dargestellt Quellen.

<img src="blob:null/026cceb9-edr4-4281-babb-b56cbf759a3d">
Nach dem Login kopieren
const EL_browse = document.getElementById('browse');
const EL_preview = document.getElementById('preview');

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);
});
Nach dem Login kopieren
#preview img { max-height: 100px; }
Nach dem Login kopieren
<input>
Nach dem Login kopieren

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

Quelle:php.cn
Erklärung dieser Website
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
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage