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...

Membuat Preview Gambar Sebelum Gambar diupload menggunakan JQuery

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" :

<input type="file" name="gambar" 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 #.

<img src="#" id="gambar_nodin" width="400" alt="Preview Gambar" />

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]);
   }
}

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 menggunakan JQuery versi 1.11.1

 

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


About Author

Yoga C. Pranata


Comment & Discussions

  • Freddy (Guest)
    Wah perbanyak donk artikel nya, tentang css yang position donk kalau bisa yang case nya agak rumitan:D

    Thanks udh share something worth it

  • Freddy Sidauruk
    Kok ndak jalan ya ketika saya aplikasikan ke program saya :(

  • Freddy Sidauruk
    Jalan kok tapi pertanyaan ku adalah apakah harus selalu dibawah script menampilkan gambar, seperti ini maksud ku,

    <img src="no-photo.png" id="gambar_nodin" width="400" alt="Preview Gambar" />

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script>
    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]);
    }
    }

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


  • Freddy Sidauruk
    ketika script jquerynya ku letakkan di antara head program tidak jalan, oh iya kalau penulisan nya jquery gi gabung dengan jquery datepicker bagaimana ya cara penulisannya

    <script type="text/javascript">
    $(function() {
    $( "#input" ).datepicker({
    changeMonth: true,
    changeYear: true
    });
    });
    </script>

    sorry for alot of question gan hope you feel great :D

    Thanks Alot :D

    • Yoga C. Pranata

      maaf baru aktif lagi gan :D

      sebenernya bisa gan kalau ditaruh di head, hanya jika source jquery nya juga di taruh di head juga. contoh :
      <head>
      <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

      <script>

      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]);

      }

      }



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

      bacaGambar(this);

      });

      </script>
      </head>


  • Dani Aristiyawan
    mas, syntax untk nampilin preview gambarnya yang mana ya ???

    klo boleh tau ngambil referensinya dari mana, untuk bebrapa syntax seperti

    var reader = new FileReader();

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

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

  • Please LOGIN before if you want to give the comment.