Cara Menampilkan Preview Gambar dengan jQuery

12/05/2019    Risman Hakim    17     Website

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

jQuery, HTML CSS, Bootstrap, website

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More