Bagaimanakah Saya Boleh Pratonton Imej Sebelum Muat Naik dalam Penyemak Imbas Tanpa Menggunakan Ajax?

Mempratonton Imej Sebelum Muat Naik dalam Penyemak Imbas

Dalam dunia pembangunan web, selalunya wajar untuk menyediakan pengguna dengan pratonton imej yang mereka muat naik sebelum melakukan proses muat naik. Fungsi ini boleh meningkatkan pengalaman pengguna dengan ketara dengan memberikan maklum balas visual dan membolehkan mereka membuat keputusan termaklum tentang imej yang ingin mereka kongsikan.

Melaksanakan Pratonton Imej tanpa Ajax

Mencapai pratonton imej tanpa menggunakan Ajax melibatkan penggunaan API Fail, yang menyediakan antara muka berasaskan pelayar untuk berinteraksi dengan fail. Langkah berikut menggariskan cara untuk melaksanakan fungsi pratonton imej menggunakan pendekatan ini:

1. Pengendali Acara untuk Input Fail:

   • Tambah acara pendengar kepada elemen input fail yang mencetuskan fungsi apabila fail sedang dipilih.

2. Buat URL Objek:

   • Dalam pengendali acara, gunakan kaedah URL.createObjectURL() untuk buat URL yang mewakili yang dipilih fail.

3. Tetapkan URL kepada Sumber Imej:

   • Dapatkan elemen di mana pratonton akan dipaparkan.
   • Tetapkan atribut src bagi elemen ke URL yang dibuat dalam langkah 2.

Contoh Kod:

Kod berikut menunjukkan langkah yang diterangkan di atas:

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

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

Dengan melaksanakan teknik ini, pembangun boleh menyediakan pengguna mereka dengan lancar dan mudah pengalaman pratonton imej tanpa memerlukan interaksi sebelah pelayan.

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