Bagaimanakah Saya Boleh Pratonton Imej Sebelum Muat Naik Menggunakan HTML5?

Pratonton Imej Sebelum Muat Naik

Dalam pembangunan web, ia boleh memberi manfaat kepada pengguna dengan pratonton imej sebelum mereka menyerahkannya . Ini membolehkan pengguna memastikan imej adalah betul sebelum memuat naiknya, yang berpotensi mengurangkan bilangan ralat dan mengolah semula.

Penyelesaian: Antara Muka Fail HTML5

Nasib baik, HTML5 Antara muka fail menyediakan cara mudah untuk pratonton imej dalam penyemak imbas tanpa membuat permintaan pelayan atau menggunakan Ajax. Begini caranya:

1. Cipta Elemen Imej

Buat HTML elemen dengan id (cth., blah) untuk memaparkan pratonton imej.

2. Dapatkan Fail daripada Input

Tambah pengendali acara onchange pada elemen input fail. Apabila fail dipilih, pengendali acara mengekstrak fail yang dipilih daripada elemen input.

3. Gunakan Antara Muka Fail

Buat URL objek untuk fail yang dipilih menggunakan kaedah URL.createObjectURL(). Ini mencipta URL sementara yang membenarkan penyemak imbas memaparkan imej.

4. Kemas kini Sumber Imej

Tetapkan atribut src bagi elemen ke URL objek. Ini akan memaparkan pratonton imej yang dipilih.

Kod Contoh

<input accept="image/*" type='file'>

imgInp.onchange = evt => {
  const [file] = imgInp.files;
  if (file) {
    blah.src = URL.createObjectURL(file);
  }
};

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Pratonton Imej Sebelum Muat Naik Menggunakan HTML5?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!