Cara Validasi Jenis File Pada Input HTML

Pada postingan kali ini, topik yang akan saya bahas lumayan cukup sederhana namun pastinya berguna banget dalam pengembangan aplikasi berbasis web. Yap, dari judulnya tentunya kalian sudah tau bahasannya yaitu tentang cara membatasi/validasi jenis file untuk tag input dengan type='file'. Kenapa sih harus dibatasi/divalidasi? selaian untuk mengarahkan pengguna untuk memilih file mana saja yang boleh dipilih untuk diupload, juga tentunya untuk membuat program menjadi lebih profesional.heheheehe :)

Validasi input file yang mungkin kalian sering temui contohnya file yang boleh diupload hanya dalam format PDF atau Excel atau Gambar dan lain-lain tergantung dari kebutuhan aplikasinya. Ok, dalam artikel ini saya akan memberikan contoh beberapa tipe file untuk divalidasi saat input file.

'<input type="file" name="file_input">'

Script di atas merupakan script standar yang biasanya digunakna untuk membuat form input dengan tipe file. Nah berikut adalah contoh untuk validasi input file dengan format gambar.

'<input type="file" name="file_input" accept="image/*">'

Pada script di atas ada atribut "accept", nantinya pada saat memilih file secara otomatis akan memfilter yang dibolehkan hanya file dengan format gambar saja. Kemudian berikut adalah untuk jenis format file yang lainnya:

untuk file PNG
accept="image/png" atau accept=".png"

untuk file PNG atau JPEG.
accept="image/png, image/jpeg" atau accept=".png, .jpg, .jpeg"

untuk semua jenis file gambar
accept="image/*"

Untuk file dokumen microsoft word
accept=".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"

untuk file microsoft excel 97-2003 (.xls)
accept="application/vnd.ms-excel"

untuk file microsoft excel 2007 ke atas (.xlsx)
accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"

untuk file dengan format .csv
accept=".csv"

untuk format plaintext atau html
accept="text/html"

untuk format file pdf
accept=".pdf"

Untuk file vidio (.avi, .mpg, .mpeg, .mp4
<input type="file" accept="video/*" />

Untuk file audio (.mp3, .wav, etc)
<input type="file" accept="audio/*" />