Cara Menampilkan Gambar Preview

Pernahkah anda membuat program untuk mengupload sebuah gambar ?. Jika anda pernah mencoba, umumnya elemen form yang digunakan adalah "input file". Namun input file tidak dapat menampilkan gambar yang dipilih. Hal tersebut membuat pengguna berfikir apakah gambar yang akan diuploadnya benar atau salah. Gambar preview memberikan solusi yang bagus untuk masalah tersebut.


Berikut yang kita butuhkan untuk membuat gambar preview:
  • HTML
  • Bootstrap
  • Jquery

<!DOCTYPE html>
<html>
<head>
<title>Gambar Preview</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
<div class="container-fluid mt-3">
<div class="row">
<div class="col-md-3">
<div class="card text-center shadow-lg  mb-5 bg-white rounded">
<div class="card-header bg-info text-light">
    Upload Gambar <br/>
</div>
<div class="card-body">
<form runat="server">
  <input type='file' id="file" />
  <img class="img-fluid" id="gambar" src="#" alt="Pilih Gambar" OnError=" $(this).hide();"/>
</form>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
function readURL(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();
    
    reader.onload = function(e) {
      $('#gambar').attr('src', e.target.result);
    }
    
    reader.readAsDataURL(input.files[0]); // convert to base64 string
  }
}

$("#file").change(function() {
$('#gambar').show();
   readURL(this);
});
</script>
</body>
</html>

 

Tampilan di atas didesain menggunakan css bootstrap menggunakan fitur card. Ketika pertama kali dijalankan url pada image adalah # dan membuat tampilan error. Untuk menyembunyikan errornya menggunakan fungsi hide dari jquery. Selanjutnya jika pengguna memilih gambar, maka fungsi onchange dijalankan. Pertama kali yang dikerjakannya mengubah status gambar menjadi "show". Selanjutnya menjalankan fungsi readURL untuk menampilkan gambar.


Terima Kasih. 😀

Popular posts from this blog

Cara Membuat Kalkulator Dengan Java Script

Cara membuat Link ke Halaman lain dan Link ke bagian Halaman

Aplikasi CRUD menggunakan Template Admin LTE