Bikin Image Preview, sebelum upload


sebelum image diupload, ada baiknya dilakukan preview terlebih dahulu. keuntungannya kita bisa melihat image yang akan kita upload. selain itu kesalahan upload image bs dimimalkan.

cara kerjanya adalah menampilkan terlebih dahulu file yang ada di root folder dimana file tersebut kita ambil. lalu kita masukkan ke source image, dengan mereplace tanda ‘\’ degan ‘/’ dan menambahkan atribut ‘file:///’

code begin
pertama tama, kita buat code html, untuk mengambil file spt kode dibawah ini

<img id=”imgDisplayPreview” align=”texttop”>
<input type=”file” value=”Browse” name=”imgUp” id=”imgUp” onChange=”displayImg(‘imgUp’, ‘imgDisplayPreview’)”>

selanjutnya kita bikin code javascritpnya:

function displayImg(imgSource, imgSourcePreview){
var imgSrc = document.getElementById(imgSource).value;
// replace \ with /
imgSrc = imgSrc.replace(/\\/gi, “\/”);

var imgPreview = “file:///”+imgSrc;
if(checkImgAllowed(imgSrc)){
//alert(imgPreview);
//document.getElementById(imgSourcePreview).innetHTML = imgPreview;
document.getElementById(imgSourcePreview).src = imgPreview;
document.getElementById(imgSourcePreview).width = 100;
document.getElementById(imgSourcePreview).height = 100;
document.getElementById(imgSourcePreview).border = 5;
document.getElementById(imgSourcePreview).style.borderColor = “#EFEFEF”;
document.getElementById(imgSourcePreview).style.padding = 5;
}else{
alert(“Sorry, u seem doesnt supply a valid img”);
document.getElementById(imgSource).value = “”;
document.getElementById(imgSourcePreview).src=””;
document.getElementById(imgSourcePreview).alt = “Invalid Img”;
}
}
// ni buat ngecek, image yang di support oleh browser
function checkImgAllowed(imgSourceName){
if(imgSourceName.indexOf(‘.jpg’) != -1 || imgSourceName.indexOf(‘.gif’) != -1 || imgSourceName.indexOf(‘.png’) != -1){ return true; }
else{ return false }
}

selesai..

kode lengkapnya:

<html>
<head>
<style>
#t1, #t2{background-color:blue;border:red 3px solid;color:white}
body{
font-family:Arial, Helvetica, sans-serif;
font-size:10px;
}
</style>
</head>
<script>
function displayImg(imgSource, imgSourcePreview){
var imgSrc = document.getElementById(imgSource).value;
//alert(imgSrc);
imgSrc = imgSrc.replace(/\\/gi, “\/”);
//var imgPreview = “<img src=\”file:///”+imgSrc+”\” width=\”100\” width=\”100\”>”;
var imgPreview = “file:///”+imgSrc;
if(checkImgAllowed(imgSrc)){
//alert(imgPreview);
//document.getElementById(imgSourcePreview).innetHTML = imgPreview;
document.getElementById(imgSourcePreview).src = imgPreview;
document.getElementById(imgSourcePreview).width = 100;
document.getElementById(imgSourcePreview).height = 100;
document.getElementById(imgSourcePreview).border = 5;
document.getElementById(imgSourcePreview).style.borderColor = “#EFEFEF”;
document.getElementById(imgSourcePreview).style.padding = 5;
}else{
alert(“Sorry, u seem doesnt supply a valid img”);
document.getElementById(imgSource).value = “”;
document.getElementById(imgSourcePreview).src=””;
document.getElementById(imgSourcePreview).alt = “Invalid Img”;
}
}

function checkImgAllowed(imgSourceName){
if(imgSourceName.indexOf(‘.jpg’) != -1 || imgSourceName.indexOf(‘.gif’) != -1 || imgSourceName.indexOf(‘.png’) != -1){ return true; }
else{ return false }
}
</script>
<body>
<img id=”imgDisplayPreview” align=”texttop”>
<input type=”file” value=”Browse” name=”imgUp” id=”imgUp” onChange=”displayImg(‘imgUp’, ‘imgDisplayPreview’)”>
<!– <div id=”uploadImg”></div>–>

</body>
</html>

One comment

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s