Postingan lainnya
Kelas Premium!
Belajar bikin website dari nol sekarang
Gunakan kupon "lebihcepat" untuk diskon 25%!
Tolong Dibantu tentang pemakaian input type file
saya mau nanya saya kan oake coding ini untuk nambah gambar di form nah yang tampil di formnya cuman nama gambarnya misal poster.jpg ada yang tau caranya untuk nampilin gambarnya di form itu juga ??
0
3 Jawaban:
Kalau pake html aja ndk bisa gan,, harus pake jquery..
<!DOCTYPE html>
<html>
<head>
<!-- pake cdn kalau gan online ,, kalau offline lsg file aja (halal juga kang tapi download dulu ) hehe -->
<title>Live Preview Upload Image</title>
<script src="jquery.min.js"></script> <!-- offline -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!-- CDN online -->
</head>
<body>
<form id="myForm" method ="post" action="process.php">
<input type='file' name='foto' id="foto" />
<img id="preview" src="#" alt="Preview Image" />
</form>
<script type="text/javascript">
$(document).ready(function(){
// fungsi untuk membaca url (load gambar) kalau gak ngeh,, copas aja dulu hehe..
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
//jalankan fungsi saat event onload
reader.onload = function (e) {
// mengatur attribute source <img id="preview"> dengan url dari foto yg dipilih
$('#preview').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
// fungsi ketika selesai memilih foto (berubahhh,.,,power rangers kali hehe)
$("#foto").change(function(){
readURL(this);
});
});
</script>
</body>
</html>
Selamat Belajar.... Happy Sharing.. (^_^)..
1
Welcome.. :)... Siap Membantu Selagi Mampu,,,
0