Membuat Preview Gambar Sebelum di Upload

Membuat Preview Gambar Sebelum di Upload

Membuat Preview Gambar Sebelum di Upload
Membuat Preview Gambar Sebelum di Upload

Cara Membuat dan Menampilkan Preview Gambar Sebelum di Upload dengan jQuery, dimana untuk membuat program ini fungsinya menggunakan JQuery bagus bagi teman - teman yang ingin membuat form upload image menggunakan fungsi preview gambar, jadi Cara kerjanya yaitu dengan kalian tekan dulu tombol upload, terus kalian pilih gambar yang ingin di upload, Dimana nanti akan menampilkan gambar yang ingin di upload, sebelum kalian benar - benar ingin menguploadnya, jadi agar ya kalau takut salah upload, apabila ada fitur preview ini kan jadi meminimalkan, apalagi kalian yang suka grasa grusu.

Nah jika sahabat penasaran dengan cara kerjanya, atau penasaran programnya seperti apa bisa lihat preview dibawah ini dan tentu codingan dibawah ini.



Membuat Preview Gambar Sebelum di Upload


Pertama, admin telah membuat tag div utama  seperti biasa untuk  menempatkan semua elemen di dalamnya. Di dalam div utama, admin telah membuat form dan meletakkan tag div untuk memuat teks , div lain dengan tag IMG untuk pratinjau, dan input file dengan label di dalam itu. admin telah menempatkan ID dan nama kelas di setiap tag untuk style  dan fungsi. Juga di dalam file HTML , admin  telah menautkan file eksternal seperti CSS, JS, dan jQuery CDN.

Sekarang menggunakan CSS admin telah menempatkan semua elemen di tempat yang tepat, seperti yang kalian lihat di pratinjau. Ada efek pentalan saat pemuatan program dan saat penyegaran yang didasarkan pada perpustakaan. Dengan CSS pertama admin telah melakukan pekerjaan dasar, memberikan nilai-nilai elemen seperti ukuran, posisi, margin, padding, dll. admin telah menggunakan perintah CSS @Keyframe untuk membuat animasi teks blink saat memuat gambar .

jQuery di sini untuk fungsi fitur upload gambar dan pratinjau dalam program ini. Mengambil elemen menggunakan metode ID name $ ( "#IDname" ) dan membuat fungsi saat menggunakan klik . pada perintah ( 'klik' , fungsi ( ) ) Selain itu, jQuery menunjukkan dan menyembunyikan teks peringatan atau berkedip saat memuat dengan menambahkan dan menghapus nama kelas .

Meninggalkan semua hal lain yang akan kalian mengerti setelah mendapatkan kode , admin tidak bisa menjelaskan semuanya secara tertulis. Untuk membuat program ini, kalian harus membuat 3 file. File pertama untuk HTML , file kedua untuk CSS , dan file ketiga untuk JavaScript . Ikuti langkah-langkah untuk membuat ini tanpa masalah. ingat jika ingin diterapkan di program kalian aplikasikan sendiri, ini hanyalah contoh dasarnya saja okeee..


Buat file HTML bernama index.html dan masukkan kode-kode ini di bawah ini.

<!DOCTYPE html>
<!-- Code By RuangCoder( https://www.ruangcoder.com )-->
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Image Upload Preview | ruangcoder.com</title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css'>
<link rel="stylesheet" href="./style.css">

</head>
<body>
  
<div class="container animated bounce">
<form id="form1" runat="server">
    <div class="alert"></div>
    <div id='img_container'><img id="preview" src="https://1.bp.blogspot.com/-nq5-OAF34-Y/XyfnckL7UMI/AAAAAAAAIlc/23skWUWP12wJN8mZXTwcuWlup8XYRB1zwCLcBGAsYHQ/s1600/ruangcoder.webp" alt="your image" title=''/></div> 
    <div class="input-group"> 
    <div class="custom-file">
    <input type="file" id="inputGroupFile01" class="imgInp custom-file-input" aria-describedby="inputGroupFileAddon01">
    <label class="custom-file-label" for="inputGroupFile01">Choose file</label>
  </div>
</div>
</form>
</div>

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

</body>
</html>

Sekarang buat file CSS bernama style.css dan masukkan kode-kode ini di sini.

.container{
  margin-left:auto;
  margin-right:auto;  
  margin-top:calc(calc(100vh - 405px)/2);
}
#form1{
  width:auto;
}
.alert{
  text-align:center;
}

#preview{  
  max-height:256px;
  height:auto;
  width:auto;
  display:block;
  margin-left: auto;
   margin-right: auto;
  padding:5px;
}
#img_container{
  border-radius:5px;
  margin-top:20px;
  width:auto;  
}
.input-group{  
  margin-left:calc(calc(100vw - 100%)/2);
  margin-top:40px;
  width:320px;
}
.imgInp{  
  width:150px;
  margin-top:10px;
  padding:10px;
  background-color:#d3d3d3;  
}
.loading{
   animation:blinkingText ease 2.5s infinite;
}
@keyframes blinkingText{
    0%{     color: #000;    }     
    50%{   color: #transparent; }
    99%{    color:transparent;  }
    100%{ color:#000; }
}
.custom-file-label{
  cursor:pointer;
}

Langkah terakhir, buat file JavaScript bernama function.js dan masukkan kodenya.

// Code By RuangCoder ( https://www.ruangcoder.com )
$("#inputGroupFile01").change(function(event) {  
  RecurFadeIn();
  readURL(this);    
});
$("#inputGroupFile01").on('click',function(event){
  RecurFadeIn();
});
function readURL(input) {    
  if (input.files && input.files[0]) {   
    var reader = new FileReader();
    var filename = $("#inputGroupFile01").val();
    filename = filename.substring(filename.lastIndexOf('\\')+1);
    reader.onload = function(e) {
      debugger;      
      $('#preview').attr('src', e.target.result);
      $('#preview').hide();
      $('#preview').fadeIn(500);      
      $('.custom-file-label').text(filename);             
    }
    reader.readAsDataURL(input.files[0]);    
  } 
  $(".alert").removeClass("loading").hide();
}
function RecurFadeIn(){ 
  console.log('ran');
  FadeInAlert("Wait for it...");  
}
function FadeInAlert(text){
  $(".alert").show();
  $(".alert").text(text).addClass("loading");  
}

Penutup

Nah kalian sudah berhasil Membuat dan Menampilkan Preview Gambar Sebelum di Upload dengan jQuery, mungkin artikel nya sampai sini aja sahabat semoga kalian terbantu ya, dan terimakasih sudah berkunjung dan jangan bosan untuk berkunjung.

Anda mungkin menyukai postingan ini