Cara Membuat Preview Image Saat Upload dengan jQuery.
Saat mengizinkan pengguna untuk mengunggah gambar melalui formulir, penting untuk memberikan penggunaan tampilan pratinjau (preview) dari gambar yang akan diunggah.
Dalam artikel ini, kita akan mempelajari cara membuat preview image saat upload dengan bantuan jQuery.
Teknik ini sangat berguna untuk meningkatkan pengalaman pengguna dan memberikan informasi visual sebelum mengirim gambar yang dipilih. Mari kita mulai!
Langkah 1: Menyiapkan Struktur HTML
Pertama, kita perlu membuat struktur HTML yang diperlukan untuk formulir dan tampilan pratinjau gambar nya.
Berikut adalah contoh sederhana:
<!DOCTYPE html>
<html>
<head>
<title>Membuat Preview Image dengan jQuery</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<form id="uploadForm" enctype="multipart/form-data">
<input type="file" id="imageInput" name="image" accept="image/*">
</form>
<div id="imagePreview">
<img id="preview" src="#" alt="Preview" style="max-width: 200px;">
</div>
<script>
// Kode jQuery akan ditambahkan di sini
</script>
</body>
</html>
Langkah 2: Membuat Kode jQuery
Setelah menyiapkan struktur HTML, kita dapat melanjutkan dengan menambahkan kode jQuery untuk mengimplementasikan tampilan pratinjau gambar.
Berikut adalah contoh lengkapnya:
<script>
$(document).ready(function() {
// Saat gambar dipilih
$("#imageInput").change(function() {
readURL(this);
});
});
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$('#preview').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
</script>
Penjelasan Kode:
$(document).ready(function() { ... }); digunakan untuk memastikan bahwa kode jQuery dijalankan setelah halaman selesai dimuat.
$("#imageInput").change(function() { ... }); adalah event listener yang akan dipicu saat input file gambar berubah. Ini akan memanggil fungsi readURL(this) untuk menampilkan tampilan pratinjau gambar.
readURL(input) adalah fungsi yang digunakan untuk membaca URL gambar yang dipilih menggunakan FileReader dan menampilkan pratinjau di elemen dengan id #preview.
Langkah 3: Uji Coba
Setelah menambahkan kode di atas ke dalam halaman HTML kamu, simpan file dan buka halaman tersebut di browser.
Kamu sekarang dapat memilih file gambar menggunakan input file. Setelah memilih gambar, kamu akan melihat pratinjau gambar langsung di bawah input file.
Dengan menggunakan jQuery, kita dapat dengan mudah membuat tampilan pratinjau gambar saat mengunggah file.
Dalam artikel ini, kami telah membahas langkah-langkah sederhana untuk membuat pratinjau gambar menggunakan jQuery dan FileReader.
Kamu dapat memodifikasi kode ini sesuai dengan kebutuhan desain dan integrasi aplikasi Anda.
Support Us
Jika artikel ini bermanfaat untuk kamu, atau membantu menyelesaikan masalah yang sedang kamu hadapi, kamu juga bisa dukung kami dengan mengunjungi halaman berikut: https://saweria.co/sangcahayaid
