Wie erhalte ich Dateigröße und Bildabmessungen vor dem Hochladen mit 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">

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);
});

#preview img { max-height: 100px; }

<input>

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!