Bagaimana untuk Mengesahkan Dimensi Imej Sebelum Muat Naik dengan JavaScript?

Mengesahkan Dimensi Imej Sebelum Muat Naik dengan JavaScript

Untuk memastikan pengguna mematuhi garis panduan saiz imej, adalah penting untuk menyemak lebar dan ketinggian imej sebelum memuat naik .

Pengesahan Fail

Kod sedia ada anda mengesahkan jenis dan saiz fail. Untuk menambah semakan dimensi imej, anda perlu mencipta objek imej daripada fail yang dimuat naik.

Menggunakan createObjectURL()

Kaedah createObjectURL() dalam penyemak imbas moden membolehkan anda untuk mencipta objek URL sementara daripada fail. Anda kemudiannya boleh memuatkan imej secara tidak segerak menggunakan objek Imej:

<code class="javascript">const file = target.files[0];
const objectUrl = URL.createObjectURL(file);

const img = new Image();
img.onload = () => {
  console.log(`Width: ${img.width}, Height: ${img.height}`);
  URL.revokeObjectURL(objectUrl);
};

img.src = objectUrl;</code>

Pertimbangan

• createObjectURL() hanya disokong dalam penyemak imbas moden seperti Firefox, Chrome , dan Opera.
• Kaedah URL.revokeObjectURL() mesti dipanggil untuk mengeluarkan URL sementara apabila selesai.

Demo

Lihat contoh langsung di sini: https://jsfiddle.net/4N6D9/1/

Nota: Seperti yang dinyatakan sebelum ini, pendekatan ini khusus pelayar dan mungkin tidak berfungsi secara konsisten merentas semua platform .

Atas ialah kandungan terperinci Bagaimana untuk Mengesahkan Dimensi Imej Sebelum Muat Naik dengan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!