Pusat Ilmu Secara Detil

Menampilkan Image Sebelum Diupload

Menampilkan Image Sebelum Diupload

Dalam pembuatan website, ada proses upload image pada suatu artikel. Tentunya hal ini bertujuan menyajikan visualisasi posting artikel menarik yang disertai dengan image.

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

Untuk percobaan ini, langkah pertama kita akan membuat file yang diberi nama style.css yang berisikan script sbb :


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:

Share this:

You Might Also Like:

Disqus Comments