JavaScript : Preview Image Sebelum Upload

Hallo, dalam seri tutorial PHP kali ini kita akan membahas preview image before upload atau menampilkan gambar terlebih dahulu sebelum di upload ke dalam form HTML.

Secara default untuk input type file pada form HTML hanya akan menampilkan nama file sebelum kita melakukan proses upload. Dalam artikel ini kita akan membuat sebuah fungsi yang bisa menampilkan file (preview file) ketika kita memilih file yang akan di upload.

Langkah #1 : Buat file HTML yang berisi form dengan tipe inputan file.

<form action="">
<img id="image-preview" alt="image preview"/>
<br/>
<input type="file" id="image-source" onchange="previewImage();"/>
</form>

Langkah #2 : Tambahkan file CSS yang berfungsi untuk menentukan lebar dan tinggi gambar preview.

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

Langkah #3 : Terakhir adalah membuat fungsi javascript. Kita akan menggunakan fungsi FileReader() bawaan javascript.

FileReader adalah objek dengan tujuan  membaca data dari objek Blob (dan karenanya juga File).

Fungsi ini mengirimkan data menggunakan event, karena membaca dari disk mungkin memerlukan waktu.

function previewImage() {
    document.getElementById("image-preview").style.display = "block";
    var oFReader = new FileReader();
     oFReader.readAsDataURL(document.getElementById("image-source").files[0]);

    oFReader.onload = function(oFREvent) {
      document.getElementById("image-preview").src = oFREvent.target.result;
    };
  };

Sampai disini pembuatan fungsi Preview Image Before Upload sudah selesai. Tinggal variasikan saja antara HTML dan CSS sesuai keperluan.

Untuk demo dari kode diatas bisa dilihat disini : DEMO