Cara Menampilkan Preview Gambar dengan jQuery

Cara Menampilkan Preview Gambar dengan jQuery - Preview gambar pada saat melakukan upload gambar adalah hal yang selalu diperhatikan oleh user atau pengguna agar tidak salah dalam memilih gambar. Saat ini banyak cara untuk membuat preview gambar pada saat ingin melakukan upload gambar, seperti pada tutorial berikut ini yang akan saya bagikan yakni mengenai bagaimana Cara Menampilkan Preview Gambar dengan jQuery. Penasaran seperti apa cara membuatnya, langsung saja simak selengkapnya berikut ini.

Kode HTML

Langkah pertama buat satu file HTML untuk membuat layout preview dan elemen untuk memilih gambar dalam hal ini saya menggunakan elemen input file seperti berikut.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="container mt-3">
    <div class="row">
        <div class="col-md-4">
            <div class="card">
                <div class="imgWrap">
                    <img src="no-image.png" id="imgView" class="card-img-top img-fluid">
                </div>
                <div class="card-body">
                    <div class="custom-file">
                        <input type="file" id="inputFile" class="imgFile custom-file-input" aria-describedby="inputGroupFileAddon01">
                        <label class="custom-file-label" for="inputFile">Choose file</label>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Kode CSS

Setelah membuat tampilan preview gambar seperti diatas, langkah selanjutnya tambahkan kode CSS untuk menambahkan efek pada saat preview gambar, berikut adalah kode CSS nya.

#imgView{  
    padding:5px;
}
.loadAnimate{
    animation:setAnimate ease 2.5s infinite;
}
@keyframes setAnimate{
    0%  {color: #000;}     
    50% {color: transparent;}
    99% {color: transparent;}
    100%{color: #000;}
}
.custom-file-label{
    cursor:pointer;
}

Kode jQuery

Setelah membuat layout kemudian memberi sedikit efek dengan CSS, langkah selanjutnya yang paling penting adalah membuat fungsi preview gambar nya, agar ketika memilih gambar maka gambar akan secara otomatis ditampilkan. Untuk itu silahkan ketikan kode jQuery berikut untuk preview gambar nya.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
    $("#inputFile").change(function(event) {  
      fadeInAdd();
      getURL(this);    
    });

    $("#inputFile").on('click',function(event){
      fadeInAdd();
    });

    function getURL(input) {    
      if (input.files && input.files[0]) {   
        var reader = new FileReader();
        var filename = $("#inputFile").val();
        filename = filename.substring(filename.lastIndexOf('\\')+1);
        reader.onload = function(e) {
          debugger;      
          $('#imgView').attr('src', e.target.result);
          $('#imgView').hide();
          $('#imgView').fadeIn(500);      
          $('.custom-file-label').text(filename);             
        }
        reader.readAsDataURL(input.files[0]);    
      }
      $(".alert").removeClass("loadAnimate").hide();
    }

    function fadeInAdd(){
      fadeInAlert();  
    }
    function fadeInAlert(text){
      $(".alert").text(text).addClass("loadAnimate");  
    }
</script>

Cara Menampilkan Preview Gambar dengan jQuery

Setelah semua sintak telah diketikan dengan benar, silahkan simpan file nya kemudian silahkan buka pada browser masing - masing dan lihat hasil nya, maka ketika input gambar akan secara otomatis gambar yang di input akan ditampilkan terlebih dahulu untuk memastikan gambar yang akan di upload tidak salah. Baiklah, cukup sekian tutorial mengenai Cara Menampilkan Preview Gambar dengan jQuery, semoga bisa bermanfaat dan selamat mencoba :)

12 Mei 2019

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Kursus Postgre SQL Database Developer Terbaik 2024 di Jakarta
chat