Thursday, January 25, 2018

Membuat preview upload image sederhana dengan jquery

Membuat preview upload image sederhana dengan jquery


Pembahasan lama karena secara jquery sudah banyak di tinggalkan oleh developer, secara sekarang sudah banyak pentolan dari javascript yang lebih oke dari jquery. Di tinggalkan bukan berarti sudah tidak ada yang pakai, tapi tetap saja masih ada developer yang menggunakannya, secara jquery sendiri masih belum mati, dia masih terus di kembangkan oleh pengembangnya.

Saya sendiri sudah lama tidak pakai jquery karena saat ini saya lebih banyak berkutat dengan polymer-project dan nativescript. Sempat pula menyicipi angularJS, vue dan reactJS. Ini masalah selera saja, saya sendiri tidak berpihak kemanapun, entah itu sisi pro atau kontra.

Dari intermezo di atas, inti dari tulisan ini adalah saya ingin sedikit berbagi tutorial jquery tentang "mengguat preview upload image". Jadi sebelum kita mengupload gambar disini saya ingin meliat preview gambarnya terlebih dahulu. Tampa panjang lebar mari kita masuk ke materi.

Requirement

Pada praktik ini saya menggunakan jquery 2.2.4, untuk source kamu bisa dapatkan disini : https://code.jquery.com/

Step by step

Pertama, load dulu jquerynya,

<script src="https://code.jquery.com/jquery-2.2.4.js"></script>

Kedua, tambahkan sedikit style pada bagian head

<style>
 .error {
    background-color: #F44336;
    color: #FFFFFF;
  font-weight: bold;
    padding: 10px;
 }
 .warning {
  background-color: #E65100;
  color: #FFFFFF;
  font-weight: bold;
  padding: 10px;
 }
</style>

Ketiga, pada bagian body html tambahkan sintak ini,

<div id="message"></div>
<div>
  <img id="previewing" src="http://www.bazaardaily.co.uk/wp-content/uploads/2017/06/Logo-Menu.png" width="555" height="277" />
</div><br/>
<div><input type="file" name="file" id="file" autofocus /></div>

Keempat, pada bagian js, tambahkan sintak ini,

$(function() {
 $("#file").change(function() {
  $("#message").empty(); // To remove the previous error message
  var file = this.files[0];
  var imagefile = file.type;
  var match= ["image/jpeg","image/png","image/jpg"];
  
  if(!((imagefile==match[0]) || (imagefile==match[1]) || (imagefile==match[2])))
  {
   $("#file").css("color","red");
   $('#previewing').attr('src','http://www.bazaardaily.co.uk/wp-content/uploads/2017/06/Logo-Menu.png');
   $("#message").html("
Please select a valid image file, Only jpeg, jpg and png Images type allowed
"); return false; } else { var reader = new FileReader(); reader.onload = imageIsLoaded; reader.readAsDataURL(this.files[0]); // for validate image size var limit = 2097152; //2MB ==> 1048576 bytes = 1MB; if(this.files[0].size > limit){ $("#message").html('
Image size is large, max size 2MB!
'); $("#file").css("color","red"); } } }); }); function imageIsLoaded(e) { $("#file").css("color","green"); $('#image_preview').css("display", "block"); $('#previewing').attr('src', e.target.result); $('#previewing').attr('width', '555px'); $('#previewing').attr('height', '277px'); };

Full source code

Untuk sintak lengkapnya kamu bisa lihat dibawah ini,

<!DOCTYPE html>
<html>
<head>
 <title>Preview image</title>
 <script src="https://code.jquery.com/jquery-2.2.4.js"></script>
 <style>
  .error {
     background-color: #F44336;
     color: #FFFFFF;
   font-weight: bold;
     padding: 10px;
  }
  .warning {
   background-color: #E65100;
   color: #FFFFFF;
   font-weight: bold;
   padding: 10px;
  }
 </style>
</head>
<body>
 <div id="message"></div>
 <div>
  <img id="previewing" src="http://www.bazaardaily.co.uk/wp-content/uploads/2017/06/Logo-Menu.png" width="555" height="277" />
 </div><br/>
 <div><input type="file" name="file" id="file" autofocus /></div>

 <script>
  $(function() {
   $("#file").change(function() {
    $("#message").empty(); // To remove the previous error message
    var file = this.files[0];
    var imagefile = file.type;
    var match= ["image/jpeg","image/png","image/jpg"];
    
    if(!((imagefile==match[0]) || (imagefile==match[1]) || (imagefile==match[2])))
    {
     $("#file").css("color","red");
     $('#previewing').attr('src','http://www.bazaardaily.co.uk/wp-content/uploads/2017/06/Logo-Menu.png');
     $("#message").html("<p class='error'>Please select a valid image file, Only jpeg, jpg and png Images type allowed</p>");
     return false;
    } else {
     var reader = new FileReader();
     reader.onload = imageIsLoaded;
     reader.readAsDataURL(this.files[0]);

     // for validate image size
     var limit = 2097152; //2MB ==> 1048576 bytes = 1MB;
     if(this.files[0].size > limit){
      $("#message").html('<p class="warning">Image size is large, max size 2MB!</p>');
        $("#file").css("color","red");
     }
    }
   });
  });

  function imageIsLoaded(e) {
   $("#file").css("color","green");
   $('#image_preview').css("display", "block");
   $('#previewing').attr('src', e.target.result);
   $('#previewing').attr('width', '555px');
   $('#previewing').attr('height', '277px');
  };
 </script>
</body>
</html>

Demo

Kamu bisa melihat demo pada tab result dibawah ini,


Saya hanya seorang "newbie" yang baru bisa ngoding lohor kemarin.


EmoticonEmoticon