Bagaimanakah Saya Boleh Dapatkan Saiz Fail, Lebar Imej dan Ketinggian Sebelum Memuat Naik Fail Menggunakan HTML5 dan JavaScript?

Dapatkan Saiz Fail, Lebar Imej dan Ketinggian Sebelum Muat Naik

Mendapatkan saiz fail dan dimensi imej sebelum memuat naik adalah penting untuk mengesahkan dan mengurus penyerahan. Begini cara untuk mencapainya menggunakan HTML5 dan JavaScript:

Menggunakan API Fail HTML5

API Fail menyediakan mekanisme untuk mengakses maklumat tentang fail yang dipilih oleh pengguna. Ini boleh dimanfaatkan untuk mendapatkan semula saiz fail, ketinggian imej dan lebar. Pertimbangkan contoh berikut:

const browseInput = document.getElementById('browse');
const previewContainer = document.getElementById('preview');

const handleFileSelection = (event) => {
  previewContainer.innerHTML = '';
  const files = event.target.files;

  if (!files || files.length === 0) {
    alert('No files selected!');
    return;
  }

  for (const file of files) {
    // Check if the file is an image
    if (!file.type.startsWith('image/')) {
      previewContainer.insertAdjacentHTML('beforeend', `Unsupported format: ${file.name}<br>`);
      continue;
    }

    // Create an image element to calculate width and height
    const img = new Image();
    img.onload = () => {
      previewContainer.appendChild(img);
      const fileInfo = `
        <div>
          ${file.name}
          ${img.width} × ${img.height}
          ${file.type}
          ${Math.round(file.size / 1024)} KB
        </div>
      `;
      previewContainer.insertAdjacentHTML('beforeend', fileInfo);
    };

    // Load the image and release the URL when done
    img.src = URL.createObjectURL(file);
  }
};

browseInput.addEventListener('change', handleFileSelection);

Kemungkinan Selanjutnya

Pendekatan ini membolehkan anda mendapatkan saiz fail, lebar imej dan ketinggian sebelum memuat naik, membolehkan kawalan yang lebih baik ke atas jenis dan dimensi fail yang diterima. Selain itu, anda boleh menggunakan maklumat ini untuk tujuan pengesahan dan paparan, seperti menyediakan pratonton imej yang dipilih sebelum penyerahan.

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