Tutorial PHP - Menampilkan Image / Gambar sebelum Upload dengan Javascript / JQuery

Pada artikel kali ini saya akan menjelaskan bagaimana cara membuat preview dari image yang akan kita upload. Salah satu kegunaan dari preview ini adalah untuk memastikan file image / gambar yang akan diupload adalah file yang benar. Dan cara yang akan dijelaskan di sini adalah cara dengan menggunakan framework JQuery.

Cara yang digunakan ini akan menampilkan preview sebelum image benar-benar diupload ke server. Dan saya hanya akan memberikan contoh sederhana tanpa mempedulikan tampilannya, jadi untuk masalah tampilan / interface bisa anda sesuaikan sendiri dengan program yang anda buat. Silahkan ikuti langkah-langkah berikut ini :

Yang pertama tentu saja kita akan meng-include file jquery nya terlebih dahulu dengan perintah sebagai berikut :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Cara di atas adalah melakukan include dengan menggunakan url dari luar, anda bisa mendownload file jquery terlebih dahulu dan kemudian melakukan include script dengan url lokal.

Langkah berikutnya adalah membuat form inputan untuk melakukan upload dengan menggunakan kode berikut ini :

<form id="form">
  <input type='file' id="img" />
  <img id="preview" src="#" alt="your image" />
</form>

Kode di atas akan menghasilkan 1 input untuk melakukan upload dan 1 image yang digunakan untuk menampilkan preview. Langkah terakhir adalah menambahkan script di bawah ini :

<script>
function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function(e) {
            $('#preview').attr('src', e.target.result);
        }

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

$("#img").change(function() {
    readURL(this);
});
</script>

Function readURL() adalah fungsi yang digunakan untuk menampilkan preview. Disini saya menggunakan bantuan FileReader untuk membaca file yang diupload dan menampilkan preview nya. Preview akan muncul saat terjadi perubahan pada input type file dengan id = img. Dan kemudian kemudian file akan dibaca dan ditampilkan pada img dengan id = preview.

Penamaan id tidak harus persis seperti contoh di atas. Anda tentu saja dapat mengubah nama id sesuai dengan cara anda biasanya. Dan yang perlu diketahui, contoh di atas adalah contoh yang sangat sederhana. Anda bisa menambahkan file image default untuk preview awal sebelum proses upload. Selain itu anda juga dapat mengatur lebar dan tinggi dari preview image karena pada contoh di atas preview image akan ditampilkan mengikuti ukuran sebenarnya. Hal lain yang dapat dilakukan adalah melakukan pengecekan apakah file yang diupload adalah file image / gambar.

Nah jika anda tidak mau menggunakan JQuery berikut ini saya beri kode lengkap dengan menggunakan javascript tanpa framework. Namun sama seperti contoh di atas, kode yang saya berikan ini hanyalah contoh sederhana tanpa pengaturan yang komplek. Silahkan sesuaikan sendiri tampilan dan pengecekan yang diperlukan program yang anda buat.

<input type='file' accept='image/*' onchange='readURL(event)'><br>
<img id='output'>
<script>
  var readURL= function(event) {
    var input = event.target;

    var reader = new FileReader();
    reader.onload = function(){
      var dataURL = reader.result;
      var output = document.getElementById('output');
      output.src = dataURL;
    };
    reader.readAsDataURL(input.files[0]);
  };
</script>

Cara kerja kedua kode diatas sama saja, perbedaannya hanya terletak pada fungsi onchange dan cara menampilkan preview pada tag img nya. Sekian penjelasan dari artikel Tutorial PHP - Menampilkan Image / Gambar sebelum Upload dengan Javascript / JQuery ini. Semoga artikel ini dapat membantu dan selamat mencoba.