Haloo, kembali lagi pada pejelasan menampilkan gambar "preview image". Pada dasarnya ketika melakukan upload gambar akan muncul preview image" terlebih dahulu sebelum melakukan save atau submit, supaya memastikan gambar sudah benar untuk melakukan save. Sebelumnya saya telah memposting artikel "Cara Preview Gambar Menggunakan Livewire" Apabila anda ingin membaca artikelnya bisa klik disini.
Tetapi pada postingan kali ini saya memberi tahu cara menampilkan gambar "preview image" ketika anda tidak menggunakan livewire atau menggunakan juga bisa. Cara berikut ini yaitu melakukan integrasi HTML bersama jquery. Perhatikan script dibawah ini !!!.
1. Dibawah ini html dengan input type file.
Perhatikan dua script ini, script ini yang menghubungkan ke jquery
- onchange="loadPreview(this);"
- id="profile_image"
<div class="custom-file">
<input type="file" onchange="loadPreview(this);" id="profile_image"
class="custom-file-input" id="customFile">
<label class="custom-file-label" for="customFile">Choose file</label>
</div>
2. Paste kan script dibawah ini pada atas tag </body> atau pada bagian yang diperlukan saja.
Perhatikan apa yang sama pada script dibawah ini dengan script html diatas.
{{-- preview image auto ganti --}}
<script>
function loadPreview(input, id) {
id = id || '#preview_img';
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$(id)
.attr('src', e.target.result)
.width(200)
.height(150);
};
reader.readAsDataURL(input.files[0]);
}
}
</script>