HTML5 Menampilkan Preview Gambar Sebelum Upload

HTML5 Preview gambar sebelum upload

Pada kesempatan kali saya akan berbagi cara menampilkan preview gambar sebelum upload dengan HTML5 yang mana sangat bermanfaat bagi admin. Preview gambar sebelum diupload saya kira membantu admin bahwa gambar yang diupload sudah benar. Selain itu dari interface juga lebih menarik ketika gambar yang akan diupload terlihat. Untuk membuat preview gambar, ada beberapa kode HTML5, kode CSS, dan javascript. Oke langsung saja cara membuat preview gambar dengan html5 sebelum upload.

Berikut kode html5 preview gambar sebelum upload pada form input:

<form action=””>
<div id=”thumbnail”></div>
<input type=”file” style=”display:none” name=”fotopreview” id=”upload-image” class=”uploadFile upload”>
<div id=”upload” class=”drop-area”>
Upload File
</div>
</form>

Selanjutnya kode css:

<style type=”text/css”>
.drop-area{
width:100px;
border: 1px solid #999;
text-align: center;
padding:10px;
cursor:pointer;
}
#thumbnail img{
width:100px;
height:100px;
margin:5px;
}
canvas{
border:1px solid red;
}
.uploadFile{
opacity: 0;
}
</style>

Berikut kode javascript + jQuerynya:

<script type=”text/javascript”>
// This preview photo gng
jQuery(function($){
var fileDiv = document.getElementById(“upload”);
var fileInput = document.getElementById(“upload-image”);
console.log(fileInput);

fileInput.addEventListener(“change”,function(e){
var files = this.files
showThumbnail(files)
},false)

fileDiv.addEventListener(“click”,function(e){
$(fileInput).show().focus().click().hide();
e.preventDefault();
},false)

fileDiv.addEventListener(“dragenter”,function(e){
e.stopPropagation();
e.preventDefault();
},false);

fileDiv.addEventListener(“dragover”,function(e){
e.stopPropagation();
e.preventDefault();
},false);

fileDiv.addEventListener(“drop”,function(e){
e.stopPropagation();
e.preventDefault();

var dt = e.dataTransfer;
var files = dt.files;
showThumbnail(files)
},false);

function showThumbnail(files){
jQuery(‘.satu’).remove();
for(var i=0;i<files.length;i++){
var file = files[i]
var imageType = /image.*/
if(!file.type.match(imageType)){
console.log(“Not an Image”);
continue;
}
var image = document.createElement(“img”);
image.classList.add(“satu”);
var thumbnail = document.getElementById(“thumbnail”);
image.file = file;
thumbnail.appendChild(image)

var reader = new FileReader()
reader.onload = (function(aImg){
return function(e){
aImg.src = e.target.result;
};
}(image))
var ret = reader.readAsDataURL(file);
var canvas = document.createElement(“canvas”);
ctx = canvas.getContext(“2d”);
image.onload= function(){
ctx.drawImage(image,100,100);
}
}
}
});
</script>

Oke, untuk contoh hasil preview gambar sebelum upload dengan html5 sebagai berikut:

HTML5 Preview gambar sebelum uploadBerikut kode lengkap html jika Agan ingin mencoba menampilkan preview gambar sebelum upload dengan html. Semoga Bermanfaat:

<html>
<head>
<style type=”text/css”>
.drop-area{
width:100px;
border: 1px solid #999;
text-align: center;
padding:10px;
cursor:pointer;
}
#thumbnail img{
width:120px;
height:100px;
margin:5px;
}
canvas{
border:1px solid red;
}

.uploadFile{
opacity: 0;
}
</style>
</head>
<body>
<h3>HTML5 Preview Gambar Sebelum Upload</h3>
<form action=””>
<div id=”thumbnail”></div>
<input type=”file” style=”display:none” name=”fotopreview” id=”upload-image” class=”uploadFile upload”>
<div id=”upload” class=”drop-area”>
Upload File
</div>
</form>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js”></script>
<script type=”text/javascript”>
// This preview photo gng
jQuery(function($){
var fileDiv = document.getElementById(“upload”);
var fileInput = document.getElementById(“upload-image”);
console.log(fileInput);

fileInput.addEventListener(“change”,function(e){
var files = this.files
showThumbnail(files)
},false)

fileDiv.addEventListener(“click”,function(e){
$(fileInput).show().focus().click().hide();
e.preventDefault();
},false)

fileDiv.addEventListener(“dragenter”,function(e){
e.stopPropagation();
e.preventDefault();
},false);

fileDiv.addEventListener(“dragover”,function(e){
e.stopPropagation();
e.preventDefault();
},false);

fileDiv.addEventListener(“drop”,function(e){
e.stopPropagation();
e.preventDefault();

var dt = e.dataTransfer;
var files = dt.files;
showThumbnail(files)
},false);

function showThumbnail(files){

jQuery(‘.satu’).remove();
for(var i=0;i<files.length;i++){
var file = files[i]
var imageType = /image.*/
if(!file.type.match(imageType)){
console.log(“Not an Image”);
continue;
}

var image = document.createElement(“img”);
image.classList.add(“satu”);
var thumbnail = document.getElementById(“thumbnail”);
image.file = file;
thumbnail.appendChild(image)

var reader = new FileReader()
reader.onload = (function(aImg){
return function(e){
aImg.src = e.target.result;
};
}(image))
var ret = reader.readAsDataURL(file);
var canvas = document.createElement(“canvas”);
ctx = canvas.getContext(“2d”);
image.onload= function(){
ctx.drawImage(image,100,100);
}
}
}
});
</script>
</body>
</html>

About Mr.Gng 244 Articles
Si Anak dari Orang Tua tersayang ingin berbagi ilmu dengan harapan bermanfaat bagi orang lain. Situs SeputarTI.Com ini sebagai salah satu media berbagi saya, khususnya dibidang TI. Salam Kenal dari saya... :-)

3 Comments

Leave a Reply

Your email address will not be published.


*