Bagaimana Mendapatkan Saiz Fail dan Dimensi Imej Sebelum Memuat Naik?

Cara Mendapatkan Saiz Fail, Dimensi Imej sebelum Memuat Naik

Dalam bidang pembangunan web, selalunya perlu mendapatkan butiran penting tentang fail sebelum memuat naiknya ke tapak web. Maklumat ini, seperti saiz fail, lebar imej dan ketinggian, boleh membantu dalam mengesahkan format fail, mengoptimumkan kecekapan muat naik dan memberi pengguna maklum balas yang berkaitan.

Menggunakan API Fail dengan jQuery atau JavaScript:

API Fail HTML5 menawarkan set lengkap fungsi untuk mengakses maklumat berkaitan fail. Dengan memanfaatkan API ini bersama-sama dengan jQuery atau JavaScript, anda boleh menangkap butiran ini dengan lancar sebelum memulakan proses muat naik.

Contoh berikut menunjukkan cara menggunakan API Fail dan jQuery untuk mengambil dan memaparkan maklumat yang diingini:

$('#browse-input').change(function() {
  let files = this.files;
  
  // Iterate through each selected file
  for (let i = 0; i < files.length; i++) {
    let file = files[i];
    
    // Extract desired information from each file
    let size = file.size;
    let width, height;
    
    // Check if file is an image and extract image dimensions if so
    if (file.type.match('image/*')) {
      let img = new Image();
      
      img.onload = function() {
        width = img.width;
        height = img.height;
        // Display extracted information
        console.log(`File: ${file.name}, Size: ${size} bytes, Width: ${width}px, Height: ${height}px`);
      };
      
      img.src = URL.createObjectURL(file);
    } else {
      // Display information for non-image files
      console.log(`File: ${file.name}, Size: ${size} bytes`);
    }
  }
});

Dengan menggabungkan penyelesaian ini, anda memperkasakan pengguna dengan pandangan menyeluruh tentang fail yang mereka ingin muat naik, membolehkan mereka membuat keputusan termaklum dan menyelaraskan proses muat naik.

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