Hallo Teman-teman semua kembali lagi bersama dengan saya di blog kita bersama, kali ini kita akan membahas mengenai cara mudah membuat image preview sebelum di upload ke dalam database server
nah mungkin teman-teman pernah melihat mengenai image preview seperti video dibawah ini, image preview ini sangat penting untuk digunakan karna memungkinkan user untuk melihat foto atau file yang akan di uploadnya,
oke tanpa berlama-lama langsung saja kita masuk ke dalam cara membuat image previewnya
untuk mempermudah pembelajaran kita, selanjutnya teman-teman buatkan file index.php , style.css, script.js dan untuk source code boleh anda copy source code dibawah ini atau bisa di DWONLOAD disini
index.php
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1,
shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/
dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEz
vF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<!-- My css -->
<link rel="stylesheet" href="assets/css/style.css">
<!-- my icon -->
<!-- my title -->
<title>Preview IMG</title>
</head>
<body>
<!-- BORDER IMAGE -->
<div class="border-img">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
fill="currentColor" class="bi bi-cloud-upload" viewBox="0 0 16 16">
<path fill-rule="evenodd"
d="M4.406 1.342A5.53 5.53 0 0 1 8 0c2.69 0 4.923 2 5.166
4.579C14.758 4.804 16 6.137 16 7.773 16 9.569 14.502 11 12.687 11H10a.5.5 0 0
1 0-1h2.688C13.979 10 15 8.988 15 7.773c0-1.216-1.02-2.228-2.313-2.228h-.5v
-.5C12.188 2.825 10.328 1 8 1a4.53 4.53 0 0 0-2.941 1.1c-.757.652-1.153 1.438-1
.153 2.055v.448l-.445.049C2.064 4.805 1 5.952 1 7.318 1 8.785 2.23 10 3.781
10H6a.5.5 0 0 1 0 1H3.781C1.708 11 0 9.366 0 7.318c0-1.763 1.266-3.223 2.942-3.
593.143-.863.698-1.723 1.464-2.383z" />
<path fill-rule="evenodd" d="M7.646 4.146a.5.5 0 0 1
.708 0l3 3a.5.5 0 0 1-.708.708L8.5 5.707V14.5a.5.5 0 0 1-1 0V5.707L5.354 7.854a
.5.5 0 1 1-.708-.708l3-3z" />
</svg>
<img class="" src="" alt="" width="230px" height="230px">
<h3>Klik Disini Untuk Upload file</h3>
</div>
<!-- END BORDER IMAGE -->
<div class="form">
<input type="file" name="img">
<button type="submit" class="btn btn-primary">Save</button>
</div>
<!-- END FORM SAVE -->
<!-- myscript -->
<script src="assets/js/script.js"></script>
<!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+
IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap
.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7
zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
-->
</body>
</html>
style.css
body {
margin: 0;
padding: 0;
text-align: center;
}
/* BORDER */.border-img {
border: 4px dotted blue;
width: 300px;
height: 300px;
margin-left: 40%;
margin-top: 80px;
margin-bottom: 20px;
padding-top: 50px;
cursor: pointer;
}
.border-img img {
margin-top: -30px;
display: none;
position: absolute;
}
.img-posisi {
margin-left: 30px;
}
svg {
width: 100px;
height: 100px;
color: rgb(49, 49, 141);
margin-bottom: 10px;
animation: upload 1s infinite linear;
}
/* END BORDER */
/* FORM */
.form {
width: 300px;
margin-left: 40%;
}
.form input {
display: none;
}
.form button {
width: 100%;
border-radius: 20px;
}
/* animation */
@keyframes upload {
from {
transform: scale(0.8);
}
to {
transform: scale(1);
}
}
script.js
const borderImg = document.querySelector('.border-img');
const svg = borderImg.querySelector('svg');
const h3 = borderImg.querySelector('h3');
const img = borderImg.querySelector('img');
const input = document.querySelector('input');
// BUATKAN EVENT UNTUK INPUT TRIGGER CLICK
borderImg.addEventListener('click',function(){
input.click();
});
// BUATKAN EVENT CHANGE INPUT
input.addEventListener('change',function(){
const file = this.files[0];
// CEK APAKAH INPUT FILE KOSONG
if(file){
// instansiasi object filereader
const reader = new FileReader();
//load reader
reader.onload = function(){
// hilangkan svg dan h3
svg.style.display = 'none';
h3.style.display = 'none';
// masukkan hasil load ke src image
img.src = this.result;
// tampilkan img
img.classList.add('img-posisi');
img.style.display = 'block'
}
//baca sumber filenya
reader.readAsDataURL(file);
}
});
Nah jika anda sudah mengcopy semua source code diatas, selanjutnya boleh anda langsung coba di komputer anda, dan hasilnya akan sama dengan video diatas dan untuk keterangan source code bisa di lihat di komentar masing-masing source code diatas,,,
Bonus
Cara membuat img Preview menggunakan Jquery
jquery.js
$('document').ready(function() {
$('.border-img').click(function() {
$('input').click();
})
$('input').change(function() {
const file = this.files[0];
if (file) {
const reader = new FileReader();
reader.onload = function() {
$('svg').css('display', 'none');
$('h3').css('display', 'none');
$('img').attr('src', reader.result);
$('img').addClass('img-posisi');
$('img').css('display', 'block');
}
reader.readAsDataURL(file);
}
})
})
Jika teman-teman belum paham boleh tinggalkan pesan di kolom komentar ...
sekian dan terimakasihh ...
0 Komentar