Bagaimana untuk Mengesahkan Input Saiz Fail dengan jQuery?

Cara Mengesahkan Input Saiz Fail dengan jQuery

Apabila memuat naik fail melalui borang HTML, pastikan fail yang diserahkan mematuhi had saiz yang telah ditetapkan adalah penting untuk mengekalkan kestabilan pelayan dan pengalaman pengguna. jQuery, perpustakaan JavaScript yang popular, menyediakan kaedah yang mudah untuk mengesahkan input saiz fail pada bahagian klien.

Pengesahan Bahagian Pelanggan

API Fail HTML5 memberikan akses terhad kepada fail sifat, termasuk saiz fail, tanpa memerlukan interaksi pelayan. Untuk melaksanakan pengesahan pihak klien, manfaatkan peristiwa pertukaran elemen input fail.

Pertimbangkan kod HTML berikut:

<code class="html"><input type="file" id="myFile" /></code>

Menggunakan jQuery, anda boleh mengikat kepada peristiwa perubahan dan akses saiz fail:

<code class="javascript">$('#myFile').bind('change', function() {
  const fileSize = this.files[0].size;
  // Perform size validation here
});</code>

Pengesahan Bahagian Pelayan

Dalam situasi di mana pengesahan pihak klien tidak mencukupi atau tidak tersedia, pertimbangkan untuk menghantar fail ke pelayan untuk maklumat lanjut pemprosesan. Pendekatan ini membolehkan pengesahan yang lebih mantap, kerana pelayan boleh menguatkuasakan sekatan saiz yang lebih ketat.

Keserasian Pelayar

API Fail disokong dalam penyemak imbas moden (v10 untuk IE). Untuk penyemak imbas yang lebih lama, adalah penting untuk menyemak sokongan API Fail sebelum mencuba pengesahan saiz fail:

<code class="javascript">if (window.File && window.FileReader && window.FileList && window.Blob) {
  // Proceed with file size validation
} else {
  // Fallback to alternate methods or provide user notification
}</code>

Untuk maklumat lanjut tentang sifat API Fail dan sokongan merentas penyemak imbas, rujuk dokumentasi berikut: http:// felipe.sabino.me/javascript/2012/01/30/javascipt-checking-the-file-size/.

Atas ialah kandungan terperinci Bagaimana untuk Mengesahkan Input Saiz Fail dengan jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!