Bagaimanakah Saya Boleh Dapatkan Saiz Fail, Dimensi Imej dan Jenis Sebelum Memuat naik dalam HTML5?

Mendapatkan Saiz Fail, Lebar Imej dan Tinggi Sebelum Muat Naik

Dengan kemunculan HTML5 dan API Fail, mendapatkan saiz fail, lebar imej dan ketinggian sebelum muat naik menjadi lebih mudah.

Menggunakan URL API

Kaedah ini menggunakan API URL untuk mencipta perwakilan URL bagi fail yang dimuat naik:

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

Ini membolehkan untuk memaparkan imej sebagai pratonton dan memaparkan butiran seperti nama fail, dimensi, jenis fail dan saiz sebelum memuat naik.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Dapatkan Saiz Fail, Dimensi Imej dan Jenis Sebelum Memuat naik dalam HTML5?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!