Bagaimanakah Saya Boleh Memaparkan Pratonton Fail Sebelum Memuat Naiknya dalam Aplikasi Web?

Memaparkan Pratonton Fail Sebelum Muat Naik

Untuk meningkatkan pengalaman pengguna semasa memuat naik fail, selalunya wajar untuk memberikan pratonton imej sebelum proses muat naik bermula. Dengan memanfaatkan keupayaan penyemak imbas asli, anda boleh mencapainya dengan mudah tanpa menggunakan muat naik fail tak segerak.

Untuk pratonton imej sebelum memuat naiknya, ikut langkah berikut:

1. Buat Elemen input: Buat elemen dengan atribut terima ditetapkan kepada "imej/*". Ini membolehkan pengguna memilih fail imej.
2. Tangkap Pemilihan Fail: Gunakan pendengar acara pada elemen untuk menangkap pemilihan fail. Apabila fail dipilih, pengendali acara akan dicetuskan.
3. Jana URL Objek: Di dalam pengendali acara, akses fail yang dipilih menggunakan imgInp.files[0]. Untuk memaparkan imej, jana URL sementara menggunakan URL.createObjectURL(file).
4. Imej Paparan: Berikan URL yang dijana kepada atribut src bagi elemen pada halaman anda. Ini akan menjadikan imej sebagai pratonton.

Berikut ialah coretan kod contoh yang menunjukkan cara untuk mencapai ini:

const imgInp = document.getElementById("imgInp");

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

<form runat="server">
  <input accept="image/*" type="file">

Dengan melaksanakan kaedah ini, anda boleh memberikan anda keupayaan pengguna untuk menggambarkan imej pilihan mereka sebelum melakukan proses muat naik, meningkatkan kemesraan pengguna web anda permohonan.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Memaparkan Pratonton Fail Sebelum Memuat Naiknya dalam Aplikasi Web?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!