Preview Image Sebelum Upload Image Ke Database

langsung aja nih🙂 hemat kouta,bikin input filenya,


<input id="selectedFile" type="file" class="btn btn-primary btn-block" style="display: none;"name="foto" onchange="uploadImage(this)" data-target="#aImgShow" />
<a href="#" class="btn btn-primary btn-block" onclick="document.getElementById('selectedFile').click();"><b>Upload Foto</b></a>

dan ini js nya


var imageTypes = ['jpeg', 'jpg', 'png']; //Validate the images to show
function showImage(src, target)
{
var fr = new FileReader();
fr.onload = function(e)
{
target.src = this.result;
};
fr.readAsDataURL(src.files[0]);

}

var uploadImage = function(obj)
{
var val = obj.value;
var lastInd = val.lastIndexOf('.');
var ext = val.slice(lastInd + 1, val.length);
if (imageTypes.indexOf(ext) !== -1)
{
var id = $(obj).data('target');
var src = obj;
var target = $(id)[0];
showImage(src, target);
}
else
{

}
}

OK moga sukses kawan (y)

 

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

%d blogger menyukai ini: