Validasi Ekstensi File Menggunakan Javascript – Validasi tipe file sebelum mengunggah ke server adalah hal yang wajib dilakukan dalam aplikasi web. Hal ini membantu memastikan bahwa pengguna memilih jenis file yang benar untuk diunggah. Validasi sisi klien lebih user-friendly daripada sisi server. Dengan menggunakan JavaScript, kita dapat dengan mudah memeriksa ekstensi file yang dipilih oleh pengguna.
Dalam artikel ini, kita akan membaut function yang berguna untuk validasi ekstensi file dalam JavaScript. Jika ekstensi file yang dipilih tidak cocok dengan jenis yang ditentukan, pesan peringatan akan ditampilkan kepada pengguna. Jika tidak, preview gambar yang dipilih akan ditampilkan di bawah bidang input file. Contoh kali ini, kita akan membuat form input dimana hanya file jenis .jpg, .jpeg, .png, dan .gif yang akan diizinkan.
Baca juga: Cara Membuat Function pada Javascript.
Validasi Ekstensi File Menggunakan JavaScript
Fungsi validasiEkstensi()
berisi kode yang akan mem-filter ekstensi yang dipilih pengguna.
function validasiEkstensi(){ 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{ // Preview gambar if (inputFile.files && inputFile.files[0]) { var reader = new FileReader(); reader.onload = function(e) { document.getElementById('preview').innerHTML = '<img src="'+e.target.result+'" style="height:300px"/>'; }; reader.readAsDataURL(inputFile.files[0]); } } }
Ekstensi file yang diizinkan sudah didefinisikan dalam variabel ekstensiOk
. Jika kalian ingin memvalidasi jenis file lainnya, ubah regex dengan ekstensi yang diizinkan.
Membuat Preview Gambar
Setelah menerapkan kode diatas fungsi validasiEkstensi()
akan dieksekusi. Jika jenis file diizinkan, preview gambar akan ditampilkan di div
preview.
<input type="file" id="file" onchange="return validasiEkstensi()"/> <div id="preview"></div>
Untuk demo nya, silahkan lihat dibawah ini;
Kalian hanya perlu menentukan ekstensi file yang diizinkan pada variabel ekstensiOk
. Selain validasi tipe file, script ini akan membantu menampilkan pratinjau gambar tanpa mengunggah menggunakan JavaScript. Sekian artikel singkat kali ini, semoga bermanfaat dan sampai jumpa pada artikel selanjutnya.
I like reading a post that will make programmers think. Also, many thanks for permitting me to comment!
Mantapp, work om!
halo kak.. thanks kak atas artikelnya sudah membantu dalam perkuliahan saya kali ini.. smoga kakak dapat terus berkarya dlm membuat artikel” pada website.. sukses slalu kak..
thanks work gan