Salam sejahtera buat kita semua. Semoga kita slalu di beri kesehatan oleh Nya, Amiiiin. Artikel kali ini berjudul "Lihat Gambar Saat Upload Dengan HTML". Apa sih manfaatnya? manfaatnya yaitu menampilkan gambar sebelum di upload (supaya gambar yang di upload tidak keliru kali,hehe). Langsung saja kita praktekkan. buatlah file dengan nama index.html dan isikan sourcecode sebagai berikut
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>kiblatwebsite.blogspot.co.id</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<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("Mohon maaf, Type File Tidak Sesuai.");
}
}
}
</script>
<body>
<h1>Preview Saat Upload Gambar </h1>
<form action="#">
<input type="file" accept="image/*" onchange="tampilkanPreview(this,'preview')" />
<input type="submit" value="Upload" /><br/>
<img id="preview" src="" alt="" width="300px"/>
</form>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>kiblatwebsite.blogspot.co.id</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<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("Mohon maaf, Type File Tidak Sesuai.");
}
}
}
</script>
<body>
<h1>Preview Saat Upload Gambar </h1>
<form action="#">
<input type="file" accept="image/*" onchange="tampilkanPreview(this,'preview')" />
<input type="submit" value="Upload" /><br/>
<img id="preview" src="" alt="" width="300px"/>
</form>
</body>
</html>
Cukup itu aja yang di butuhkan, sekarang silahkan buka file tadi dan lihatlah hasilnya..jreeeeeeeeen..kerreeeeeen
Sekian artikel kali ini, baca juga artikel lainnya disini
