Membuat Preview Upload Image Sederhana Dengan Jquery
Pembahasan usang alasannya yakni secara jquery sudah banyak di tinggalkan oleh developer, secara kini sudah banyak pentolan dari j4vascript yang lebih baiklah 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, ia masih terus di kembangkan oleh pengembangnya.
Saya sendiri sudah usang tidak pakai jquery alasannya yakni ketika ini aku lebih banyak berkutat dengan polymer-project dan nativescript. Sempat pula menyicipi angularJS, vue dan reactJS. Ini persoalan selera saja, aku sendiri tidak berpihak kemanapun, entah itu sisi pro atau kontra.
Dari intermezo di atas, inti dari goresan pena ini yakni aku ingin sedikit menyebarkan tutorial jquery wacana "mengguat preview upload image". Makara sebelum kita mengupload gambar disini aku ingin meliat preview gambarnya terlebih dahulu. Tampa panjang lebar mari kita masuk ke materi.
Requirement
Pada praktik ini aku memakai jquery 2.2.4, untuk source kau sanggup 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 bab 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 bab body html tambahkan sintak ini,
<div id="message"></div> <div> <img id="previewing" src="aciknadzirah.blogspot.com/search?q=(" 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 kau sanggup 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="aciknadzirah.blogspot.com/search?q=("<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 sanggup melihat demo pada tab result dibawah ini,
Sumber http://www.kang-cahya.com
0 Response to "Membuat Preview Upload Image Sederhana Dengan Jquery"
Posting Komentar