Cara Membuat Upload Preview dengan Javascript
Halo teman teman di kesempatan kali ini saya akan menjelaskan mengenai Cara Merancang Upload Preview dengan Javascript, di kasus kali ini kita akan mencoba menampilkan sebuah gambar sebelum di upload, yaitu dengan menggunakan javascript, nah nanti ketika kita ingin mengupload sebuah file karenanya gambar yang akan kita upload akan muncul secara otomatis.
Bagi Cara Merancang Upload Preview dengan Javascript, kita akan menggunakan HTML5 selaku strukturnya, oke teman teman kita seketika saja masuk ke study casenya,
Silahkan teman teman simpan script dibawah ini dengan nama index.html
<!DOCTYPE html>
<html>
<head>
<title>Cara Merancang upload preview dengan javascript</title>
<meta charset=UTF-8>
<meta name=viewport content=width=device-width>
<script>
function tampilkanPreview(gambar,idpreview){
var gb = gambar.files;
for (var i = 0; i < gb.length; i++){
var gbPreview = gb[i];
var imageType = /image.*/;
var preview=document.getElementById(idpreview);
var reader = new FileReader();
if (gbPreview.type.match(imageType)) {
preview.file = gbPreview;
reader.onload = (function(element) {
return function(e) {
element.src = e.target.result;
};
})(preview);
reader.readAsDataURL(gbPreview);
}else{
alert(file yang kamu upload tak sesuai. Khusus mengunakan image.);
}
}
}
</script>
<style type=text/css>
form{width: 310px; margin: auto;}
.input{background: #F0FFF3; color: black; cursor: pointer;}
</style>
</head>
<body>
<form id=myForm action= method=get>
<input type=file class=input accept=image/* onchange=tampilkanPreview(this,'preview') />
<input type=submit value=Upload /><br/>
<!--untuk menampilkan file gambar yang telah di upload-->
<img id=preview src= alt=Halo teman teman di kesempatan kali ini saya akan menjelaskan mengenai Cara Merancang Upload Preview dengan Javascript width=200px/>
</form>
</body>
</html>
Berikutnya silahkan di save, dan coba dijalan kan di browser nya karenanya akan muncul seperti dibawah ini,..
Oke teman teman lumayan gampang bukan, Cara Merancang Upload Preview dengan Javascript nya, demikianlah dulu panduan saya kali ini mengenai Cara Merancang Upload Preview dengan Javascript.
Semoga bermanfaat, Terimakasih
Sumber https://kursuswebsite.org
