[JavaScript] Menampilkan Gambar Sebelum Upload ( Preview Image )

JavaScript - bahasa pemograman client side ini sudah sangat populer dan banyak penggunanya, tidak hanya itu karena komunitynya yang cukup besar, sudah banyak sekali library-library pada javascript yang digunakan untuk mempermudah dalam coding.

dalam javascript kita bisa melakukan banyak hal, bahkan tanpa library sekalipun kita bisa melakukan hal menarik pada website kita dengan native javascript atau javascript default, tanpa library ataupun framework.

Menampilkan Gambar Sebelum Upload

salah satunya adalah menampilkan gambar sebelum di upload ke server, atau biasa disebut preview image ( Pratinjau Gambar ). kita bisa melakukan hal ini dengan mudah dengan native javascript.

1. Buatlah file HTML
2. sambungkan dengan file javascript kalian, ( jika scriptnya terpisah )
3. setelah itu buatlah 2 element, yaitu file input, dan preview image box
<input  id="input" type="file"  />

<img id="box" " style="width: 30%;height: 30%"/>


4. kalian bisa mengubah style kedua element tersebut sesuka kalian.
5. masukan script berikut ke file js kalian, atau ke dalam tag <script> di html
inputBox = document.getElementById("input"); // Mengambil elemen tempat Input gambar

inputBox.addEventListener('change',function(input){ // Jika tempat Input Gambar berubah

var box = document.getElementById("box"); // mengambil elemen box
var img = input.target.files; // mengambil gambar

var reader = new FileReader(); // memanggil pembaca file/gambar
reader.onload = function(e){ // ketika sudah ada
box.setAttribute('src',e.target.result); // membuat alamat gambar
}
reader.readAsDataURL(img[0]); // menampilkan gambar
}
); // manderser.blogspot.com


6. jalankan dan coba pilih, gambar.

jika terjadi error, periksa kembali kode yang di copy, atau kalau masih bingung silahkan bertanya di comment bawah

Semoga Bermanfaat

Share this

Author : ManDerser

Related Posts