7/25/2019 0jagocoding.com - Membuat Preview Gambar Sebelum Gambar Diupload Menggunakan Jquery

1/3

7/25/2019 0jagocoding.com - Membuat Preview Gambar Sebelum Gambar Diupload Menggunakan Jquery

2/3

Membuat Preview Gambar Sebelum Gambar

diupload menggunakan JQuery

Oleh: Yoga C. Pranata

Saya ingin share tentang bagaimana caranya menampilkan suatu gambar

sebelum diupload. Apa bisa ya? Bisa dong. Caranya menggunakan

Javascript. Cara kerjanya yaitu tekan dulu tombol upload, terus pilih

gambar yang ingin diupload, kemudian akan muncul preview secara

otomatis untuk gambar yang ingin diupload...

Saya ingin share tentang bagaimana caranya menampilkan suatu gambar sebelum diupload. Apa

bisa ya? Bisa dong. Caranya menggunakan Javascript. Cara kerjanya yaitu tekan dulu tombol upload,

terus pilih gambar yang ingin diupload, kemudian akan muncul preview secara otomatis untuk

gambar yang ingin diupload. Scriptnya sebagai berikut :

1. Buat form uploadnya terlebih dahulu dengan id="preview_gambar" :

2. Tambahkan tempat untuk menampilkan gambar yang ingin diupload, beri id="gambar_nodin".

Tapi kosongkan dulu kolom src nya, ber saja tanda #.

3. Kemudian buat fungsi javascript sebagai berikut :

function bacaGambar(input) {

if (input.files && input.files[0]) {

var reader = new FileReader();

reader.onload = function (e) {

$('#gambar_nodin').attr('src', e.target.result);

}

reader.readAsDataURL(input.files[0]);

}

7/25/2019 0jagocoding.com - Membuat Preview Gambar Sebelum Gambar Diupload Menggunakan Jquery

3/3

}

Penjelasan :

saya membuat fungsi dengan nama fungsi bacaGambar(input). kemudian buat pengkondisian jika

ada inputan, maka gambar yang akan diupload akan ditampilkan pada id #gambar_nodin dan akan

ditambahkan value src gambar secara otomatis.

4. Selanjutnya buat script JQuery untuk menjalankan fungsi javascript yang telah dibuat diatas, jadi

setiap ada perubahan pada form upload, akan selalu dipreview terlebih dahullu. scriptnya sebagai

berikut :

$("#preview_gambar").change(function(){

bacaGambar(this);

});

5. Selanjutnya Coba di browser Anda sudah berfungsi dengan baik apa belum fungsi preview

gambar yang telah dibuat.

NB : Jangan lupa untuk memasukkan JQuery nya. disini saya menggunakanJQuery versi 1.11.1

Untuk membantu pembelajaran, Saya sertakan file demo dan file download nya. Semoga membantu.:)

Tentang Penulis

Yoga C. Pranata

http://code.jquery.com/jquery-1.11.1.jshttp://code.jquery.com/jquery-1.11.1.js