Buat Preview Image Sebelum Upload Tanpa Reload Dengan jQuery

Buat Preview Image Tanpa Reload Dengan jQuery. Ok, kali ini ngoding pak akan membagikan potongan kode sederhana namun powerfull yaitu Membuat preview image tanpa reload dengan jquery + js

Image preview adalah salah satu fitur yang sangat dibutuhkan untuk mengecek kembali apakah gambar yang kita upload sudah benar atau tidak. Jadi pada tutorial kali ini saya akan membagikan cara membuatnya dengan jQuery, HTML dan CSS

TAHAP TAHAP

1. Buat file HTML terlebih dahulu dan ketikkan kode dibawah  ini 


2. Lalu buat tuliskan script javascript di bawah tag </head> atau buat file baru dengan nama preview_image.js 

• Perhatikan baris ke 6 jika ada file yang masuk maka akan menjalankan baris ke 7
• Pada baris ke 7 akan menampilkan image dengan id "blah" dan mengubah atribut dengan source yang sudah diambil pada baris ke 12-14
• Pada baris 12-14 jika ada perubahan pada input file maka function readURL akan dijalankan 

Pada intinya function readURL akan mengambil address file dari inputan file 

Tampilan lengkap file HTML dan javascript nya 

Ok, sampai sini dulu postingan kode sederhana nya, jika ada yang perlu ditanyakan silahkan dari kontak atau dari kolom komentar pada postingan ini. Terimakasih