Bagaimana Mendapatkan Saiz Fail dan Dimensi Imej Sebelum Muat Naik dengan JavaScript?

Saiz Fail dan Dimensi Imej Sebelum Muat Naik Menggunakan jQuery atau JavaScript

Untuk mendapatkan saiz fail, lebar imej dan ketinggian sebelum memuat naik ke tapak web, gunakan API Fail disediakan oleh HTML5 dan JavaScript.

Menggunakan API URL

Objek Blob akan diwakili sebagai URL untuk sumber imej.

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

Atas ialah kandungan terperinci Bagaimana Mendapatkan Saiz Fail dan Dimensi Imej Sebelum Muat Naik dengan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!