Rumah >hujung hadapan web >tutorial js >Bagaimanakah Saya Boleh Dapatkan Saiz Fail, Dimensi Imej dan Jenis Sebelum Memuat naik dalam HTML5?

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

Linda Hamilton
Linda Hamiltonasal
2024-12-27 11:42:12989semak imbas

How Can I Get File Size, Image Dimensions, and Type Before Uploading in 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!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn