Kali ini saya akan memberikan tutorial tentang cara menampilkan gambar sebelum (Preview) di upload dengan menggunakan jQuery. Biasanya user atau pengguna ketika akan upload foto ingin terlebih dahulu dapat melihat foto yang diupload sehingga user tidak salah dalam pemilihan foto. Lantas bagaimana cara membuatnya ? Saat ini banyak sekali cara untuk membuat preview gambar pada sebelum melakukan upload foto, seperti pada tutorial kali ini yang akan saya bagikan menggunakan jQuery. Untuk mempersingkat waktu kita langsung saja ketutorialnya.
Baca juga Membuat Jam Digital dengan jQuery
Pertama kita buat file HTML seperti berikut
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tutorial Preview Gambar</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-3">
<div class="row">
<div class="col-md-4">
<div class="card">
<div class="imgWrap">
<img src="logowandi.jpg" id="imgView" class="card-img-top img-fluid">
</div>
<div class="card-body">
<div class="custom-file">
<input type="file" id="inputFile" class="imgFile custom-file-input"
aria-describedby="inputGroupFileAddon01">
<label class="custom-file-label" for="inputFile">Choose file</label>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Selanjutnya sisipkan code jquery dibawah ini , didalam tag <body>, paling bawah saja :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$("#inputFile").change(function (event) {
fadeInAdd();
getURL(this);
});
$("#inputFile").on('click', function (event) {
fadeInAdd();
});
function getURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
var filename = $("#inputFile").val();
filename = filename.substring(filename.lastIndexOf('\\') + 1);
reader.onload = function (e) {
debugger;
$('#imgView').attr('src', e.target.result);
$('#imgView').hide();
$('#imgView').fadeIn(500);
$('.custom-file-label').text(filename);
}
reader.readAsDataURL(input.files[0]);
}
$(".alert").removeClass("loadAnimate").hide();
}
function fadeInAdd() {
fadeInAlert();
}
function fadeInAlert(text) {
$(".alert").text(text).addClass("loadAnimate");
}
</script>
Maka akan menampilkan halaman seperti berikut :
Baca juga Membuat Web Scrapper dengan NodeJs
Jika anda ingin full script nya, adalah di bawah ini :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tutorial Preview Gambar</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-3">
<div class="row">
<div class="col-md-4">
<div class="card">
<div class="imgWrap">
<img src="logowandi.jpg" id="imgView" class="card-img-top img-fluid">
</div>
<div class="card-body">
<div class="custom-file">
<input type="file" id="inputFile" class="imgFile custom-file-input"
aria-describedby="inputGroupFileAddon01">
<label class="custom-file-label" for="inputFile">Choose file</label>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$("#inputFile").change(function (event) {
fadeInAdd();
getURL(this);
});
$("#inputFile").on('click', function (event) {
fadeInAdd();
});
function getURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
var filename = $("#inputFile").val();
filename = filename.substring(filename.lastIndexOf('\\') + 1);
reader.onload = function (e) {
debugger;
$('#imgView').attr('src', e.target.result);
$('#imgView').hide();
$('#imgView').fadeIn(500);
$('.custom-file-label').text(filename);
}
reader.readAsDataURL(input.files[0]);
}
$(".alert").removeClass("loadAnimate").hide();
}
function fadeInAdd() {
fadeInAlert();
}
function fadeInAlert(text) {
$(".alert").text(text).addClass("loadAnimate");
}
</script>
</body>
</html>
Gmn mudah bukan ? semoga berhasil.
Baca juga Membuat Program Jadwal Sholat dengan data JSON dan PHP
Itulah tutorial menampilkan gambar sebelum di upload pada web dengan jQuery, semoga artikel ini bisa bermanfaat. Sampai jumpa di artikel yang lainnya.
Wiki
Thanks for clicking.
Thanks for clicking.
Thanks for clicking.
͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏͏