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>