Cara Mudah Membuat Validasi Extensi File Menggunakan Javascript
Jurnalcode.com

Cara Mudah Membuat Validasi Extensi File Menggunakan Javascript


Jurnalcode : Salam Kembali Sahabat Jurnalcode, Sudah terlalu lama saya tidak mengisi web ini berhubung kegiatan yang sangat padat dari mulai project sampai liburan .  nah kali ini saya kembali dengan sebuah trik mudah untuk kalian semua , apa itu ? ya .. trik tersebut adalah Cara Mudah Membuat Validasi Extensi File Menggunakan Javascript.

Beberapa temen mungkin mengalami kesulitan dalam melakukan validasi extensi file yang sebenar nya bisa kita lakukan di script proses di php namun jika dijavascript lebih mudah kenapa tidak kita coba saja . Validasi ini sebenar nya dibuat untuk kemananan agar para perusuh tidak dengan mudah mengupload shell dari form kita.

Baiklah Langsung saja kita ketopik Pembahasan  :

Pertama kita buat file HTML terlebih dahulu , loh kok html ?? nggak php .. nah penjelasan nya adalah bisa saja kita buat form di php atau html , dalam kasus ini saya menggunakan html karena javascript nya akan langsung dipanggil ketika extensi file di pilih tanpa harus di submit .

Berikut Script javascript nya :

<script>
function validasiFile(){
    var inputFile = document.getElementById('file');
    var pathFile = inputFile.value;
    var ekstensiOk = /(.jpg|.jpeg|.png|.gif)$/i;
    if(!ekstensiOk.exec(pathFile)){
        alert('Silakan upload file yang memiliki ekstensi .jpeg/.jpg/.png/.gif');
        inputFile.value = '';
        return false;
    }else{
        //Pratinjau gambar
        if (inputFile.files && inputFile.files[0]) {
            var reader = new FileReader();
            reader.onload = function(e) {
                document.getElementById('pratinjauGambar').innerHTML = '<img src="'+e.target.result+'"/>';
            };
            reader.readAsDataURL(inputFile.files[0]);
        }
    }
}
</script>

 

Kemudian Kita Buat sebuah Form :

<input type="file" id="file" onchange="return validasiFile()"/>
<!-- Pratinjau gambar -->
<div id="pratinjauGambar"></div>

 

Nah untuk Code Lengkap nya lihat disini :

<!DOCTYPE html>
<html lang="id">  
<head>
<title>Jurnalcode Validasi Extensi File Dengan Javascript</title>
<script>
function validasiFile(){
    var inputFile = document.getElementById('file');
    var pathFile = inputFile.value;
    var ekstensiOk = /(.jpg|.jpeg|.png|.gif)$/i;
    if(!ekstensiOk.exec(pathFile)){
        alert('Silakan upload file yang memiliki ekstensi .jpeg/.jpg/.png/.gif');
        inputFile.value = '';
        return false;
    }else{
        //Pratinjau gambar
        if (inputFile.files && inputFile.files[0]) {
            var reader = new FileReader();
            reader.onload = function(e) {
                document.getElementById('pratinjauGambar').innerHTML = '<img src="'+e.target.result+'"/>';
            };
            reader.readAsDataURL(inputFile.files[0]);
        }
    }
}
</script>
</head>
<body>
<h1>Jurnalcode Validasi Extensi File Dengan Javascript</h1>
<hr>
<!-- Input file -->
<input type="file" id="file" onchange="return validasiFile()"/>

<!-- Pratinjau gambar -->
<div id="pratinjauGambar"></div>
</body>
</html>

 

Baiklah silahkan Temen Temen Coba insya Allah Berhasil .. Selamat Mencoba.

 

.

Ayo Komentar