Bagaimanakah Saya Boleh Pratonton Saiz Fail, Dimensi Imej Sebelum Memuat Naik dengan HTML5 dan JavaScript?-tutorial js-php.cn

Bagaimanakah Saya Boleh Pratonton Saiz Fail, Dimensi Imej Sebelum Memuat Naik dengan HTML5 dan JavaScript?

Linda Hamilton

Lepaskan： 2024-11-26 11:51:11

asal

810 orang telah melayarinya

How Can I Preview File Size, Image Dimensions Before Uploading with HTML5 and JavaScript?

Pratonton Metadata Fail Sebelum Memuat Naik dengan HTML5 dan JavaScript

Masalah:

Bagaimana anda boleh mendapatkan saiz fail, imej lebar, dan tinggi sebelum memuat naik fail ke tapak web anda menggunakan jQuery atau JavaScript?

Penyelesaian:

Menggunakan API Fail HTML5, anda boleh mengakses maklumat berikut sebelum muat naik fail:

Saiz Fail:

Melalui sifat file.size, yang mengembalikan saiz fail dalam bait.

Lebar dan Ketinggian Imej:

Untuk imej, anda boleh menggunakan API URL untuk mencipta URL sementara bagi gumpalan imej dan muatkannya ke dalam elemen imej sementara.
Setelah imej dimuatkan, anda boleh mengakses sifat lebar dan ketinggiannya sebelum membatalkan URL objek untuk mengosongkan memori.

Contoh Menggunakan API URL:

Coretan kod di bawah menunjukkan cara untuk melihat metadata imej menggunakan API URL:

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

Salin selepas log masuk

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