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,
