Bagaimanakah Saya Boleh Pratonton Bahagian Klien Imej Sebelum Memuat Naik?

Pratonton Imej di Bahagian Pelanggan

Untuk pratonton imej sebelum memuat naiknya, anda boleh memanfaatkan input fail HTML dan URL.createObjectURL () kaedah. Berikut ialah penyelesaian terperinci yang berfungsi sepenuhnya dalam penyemak imbas:

Dalam borang HTML anda, tambahkan medan input yang membenarkan pemilihan imej:

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

Seterusnya, cipta elemen imej untuk memaparkan pratonton:

<img>

Akhir sekali, tambah JavaScript yang menangkap fail yang dipilih dalam medan input dan menggunakan kandungannya untuk mencipta URL objek yang kemudiannya diperuntukkan kepada atribut src elemen imej:

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

Apabila pengguna memilih imej dalam medan input, kod ini akan mengemas kini elemen imej secara dinamik, memaparkan pratonton imej yang dipilih tanpa perlu memuat naiknya ke pelayan. Pendekatan ini mudah dan cekap untuk mempersembahkan pratonton segera fail imej pada sisi klien sebelum pengguna komited untuk memuat naiknya.

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