Menampilkan Image Sebelum Diupload
Namun terkadang sebelum mengupload image tersebut, kadangkala kita ingin melihat preview dari file image yang kita pilih.
Dalam edisi tutorial ini, kita hanya akan membahas : Bagaimana menampilkan image sebelum dilakukan proses upload ke database. Proses upload image ke database akan dibahas dimateri berikutnya.
Secara ringkas, proses preview image sebelum upload dilakukan oleh fungsi dalam javascript seperti yang ditunjukkan oleh code berikut:
<script type="text/javascript"> function PreviewImage() { var oFReader = new FileReader(); oFReader.readAsDataURL(document.getElementById("uploadImage").files[0]); oFReader.onload = function (oFREvent) { document.getElementById("uploadPreview").src = oFREvent.target.result; }; }; </script>
Sedangkan form pemilihan image dalam kode html ditunjukkan oleh code berikut:
<img id="uploadPreview" style="width: 150px; height: 150px;" /><br> <input id="uploadImage" type="file" name="myPhoto" onchange="PreviewImage();" />
Percobaan
root {
display: block;
}
h1 {
color: #064A7A;
font-size: 34px;
font-weight: bold;
margin:28px 0 8px;
padding: 0;
}
input[type=text] {
width: 450px;
height:30px;
display: block;
margin-bottom: 5px;
border-radius:10px 10px 10px 10px;
}
#wrapper{
width:1000px;
height:680px;
border:1px solid #cdcdcd;
background:#f0f3f6;
margin:auto;
}
#header{
width:960px;
height:150px;
border:1px solid #cdcdcd;
background:#639fce;
margin:auto;
margin-top:5px;
}
#wrapper_konten{
width:960px;
height:500px;
border:1px solid #cdcdcd;
background:#639fce;
margin:auto;
margin-top:5px;
}
#left_konten{
width:240px;
height:485px;
border:1px solid #cdcdcd;
background:#e6e2e2;
float:left;
margin-left:5px;
margin-top:5px;
}
#right_konten{
width:700px;
height:485px;
border:1px solid #cdcdcd;
background:#e6e2e2;
float:left;
margin-left:5px;
margin-top:5px;
margin-right:5px;
}
#form_top_artikel
{
background:#FA8072;
width:85%;
height:40px;
margin-top:50px;
margin-left:50px;
margin-right:50px;
border-top-left-radius:10px;
border-top-right-radius:10px;
}
#form_content_artikel
{
background:#fff;
width:85%;
height:340px;
margin-left:50px;
margin-right:50px;
}
#form_bottom_artikel
{
background:#DEB887;
width:85%;
height:40px;
margin-left:50px;
margin-right:50px;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
}
#isi_artikel{
padding-left:25px;
padding-top:25px;
}
.produksi{
text-align: center;
}
#judul{
padding:10px;
}
Langkah kedua kita buat file editor.php yang mengandung code sbb:
<html> <head> <title>Menampilkan Gambar Sebelum di Upload</title> <link type="text/css" rel="stylesheet" href="style.css"/> <script type="text/javascript"> function PreviewImage() { var oFReader = new FileReader(); oFReader.readAsDataURL(document.getElementById("uploadImage").files[0]); oFReader.onload = function (oFREvent) { document.getElementById("uploadPreview").src = oFREvent.target.result; }; }; </script> </head> <body> <div id="wrapper"><!-- Membuat Kotak 1--> <div id="header"> <h1 align="center">Display Image <br>Before Upload </h1> </div> <div id="wrapper_konten"> <div id="left_konten"> </div> <div id="right_konten"> <div id="form_top_artikel"> </div> <div id="form_content_artikel"> <div id="isi_artikel"> <form name="visi" method="post" action=""> Judul <input type="text" name="judul"> Gambar<br> <img id="uploadPreview" style="width: 150px; height: 150px;"/><br> <input id="uploadImage" type="file"name="myPhoto" onchange="PreviewImage();"/> <br><br> <input type="submit" width="120" height="24" name="phpvar" value="Submit" > </form> </div> </div> <div id="form_bottom_artikel"> <a href="http://ilmu-detil.blogspot.com"> <div class="produksi">Pusat Ilmu Secara Detil</div> </a> </div> </div> </div> </div> </body> </html>
Berikut ini output dari progam tersebut :
Anda dapat mendownload program tsb:
