Membuat Preview Image Before Upload

Membuat sebuah upload photo memang memerlukan yang namanya Preview sebelum kita menyimpan sebuah data maka kita harus menambahkan Preview Photo untuk membantu orang lain dalam mengupload photo yang akan dijadikan sebagai photo user atau admin.

Disini kita akan menggunakan Javascript untuk melihat photo sebelum di upload jadi akan memperbagus penampilannya dan kalian bisa menggembangkan lagi dengan tampilan bisa menyerupai Google atau Facebook sesuai dengan kemapuan kalian.

Membuat Preview Image Before Upload

Pertama buat kode input terlebih dahulu seperti ini

<img id='preview-image' alt='Preview Photo' title='Preview Photo'/>
<br>
<input type='file' id='preview' onchange='previewImage();'>

Kedua tambahkan css jika ingin gambar yang di lihat tidak besar

#preview-image{
    display:none;
    width : auto;
    height : 300px;
}

Ketiga ini yang penting kita harus menggunakan javascript, kodenya dibawah

function previewImage() {
  document.getElementById("preview-image").style.display = "block";
    var oFReader = new FileReader();
     oFReader.readAsDataURL(document.getElementById("preview").files[0]);
 
    oFReader.onload = function(oFREvent) {
      document.getElementById("preview-image").src = oFREvent.target.result;
    };
  };

Untuk melihat hasilnya kalian klik Button dibawah ini

• Result

Mungkin itu saja untuk saat ini dan tunggu update terbaru dari Pintarsaurus jangan lupa Follow Pintarsaurus 😀

Bagikan Artikel ini