Menampilkan Gambar Sebelum Upload ke Server
Tutorial kali ini kita akan membahas Cara Menampilkan Gambar Sebelum Upload Ke Server dengan javascript, sebelumnya admin sudah memberikan tutorial Menampilkan type File dan Ukuran pada input file , nah sedikit berbeda dengan sebelumnya kali ini kita akan menampilkan gambar saja sebelum upload file , karena kita akan membuat validasi tipe gambar dengan javascript sebelum gambar dipilih / diupload.
JavaScript Code
function fileValidation(){
var fileInput = document.getElementById('file');
var filePath = fileInput.value;
var allowedExtensions = /(\.jpg|\.jpeg|\.png|\.gif)$/i;
if(!allowedExtensions.exec(filePath)){
alert('Please upload file having extensions .jpeg/.jpg/.png/.gif only.');
fileInput.value = '';
return false;
}else{
//Image preview
if (fileInput.files && fileInput.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
document.getElementById('imagePreview').innerHTML = '<img src="'+e.target.result+'"/>';
};
reader.readAsDataURL(fileInput.files[0]);
}
}
}
HTML CODE
tempatkan tepat dibawah code diatas , dan simpan dengan nama "index.html"
<!-- File input field -->
<input type="file" id="file" onchange="return fileValidation()"/>
<!-- Image preview -->
<div id="imagePreview"></div>