Cara Membatasi Jenis File Upload

Form upload sering digunakan untuk user pada saat mengganti profil atau mengunggah media audio, video dan file lainnya. Namun dalam kasus tertentu seperti pada saat user mengganti profil pada suatu website, maka user hanya dapat mengupload file gambar sedangkan file dengan extensi lain tidak akan terlihat dalam pilihan. Kasus ini terjadi juga pada saat user hanya dapat mengupload audio saja maka pilihan untuk file extensi lain akan dimatikan termasuk file gambar. Sebenarnya fitur ini telah disediakan pada HTML, namun saya yakin masih banyak programmer yang tidak mengetahui adanya fungsi ini. Dalam tag input tipe file, tersedia attribut accept yang berfungsi mengfilter pilihan user untuk memilih file pada saat upload. Filter ini telah tersedia pada HTML untuk file berextensi tertentu seperti audio, video dan gambar. Namun untuk extensi file lainnya seperti exe, doc, zip, dll dibutuhkan konfigurasi yang memang tidak tersedia pada HTML, dan inipun tergantung dari support tidaknya suatu browser. Berikut adalah format penulisannya :

[code]
<input accept=”file_extension|audio/*|video/*|image/*|media_type”>
[/code]

Langsung saja! Perhatikan program dibawah ini :

[code]
<form action=”demo.php”>
<input type=”file” name=”pic” accept=”image/*”>
<input type=”submit”>
</form>
[/code]

Coba kamu perhatikan pada bagian accept=”image/*”, ini menunjukan bahwa form upload tersebut hanya mengijinkan user untuk mengupload file gambar. Atribut accept adalah atribut yang memiliki fungsi untuk pengecualian pada user untuk memilih file dengan jenis atau ekstensi tertentu. Pada bagian program image/*, bisa kamu sesuaikan sesuai pembatasan pemilihan file yang kamu inginkan. Berikut adalah daftarnya :

ValueDescription
file_extensionSebuah ekstensi file yang dimulai dengan karakter TITIK, misalnya: .gif, .jpg, .png,
.doc
audio/*Semua file suara yang diterima
video/*Semua file video yang diterima
image/*Semua file gambar yang diterima
media_typeSebuah jenis media yang sah, tanpa parameter

Namun dari penjelasan diatas , masih ada beberapa kekurangan seperti tidak supportnya browser pada atribut accept. Namun sekarang ini, kebanyakan browser keluaran terbaru telah mengalami perbaikan untuk mengatasi hal seperti ini. Berikut daftar browser dan versinya yang mendukung atribut eccept :

AttributeChrome IE Firefox Safari Opera Mini
accept8.010.04.06.015.0

Demikian tutorial kali ini. Semoga dapat menjadi pengetahuan buat kamu semua. 🙂

Ayo! Segera daftarkan email kamu untuk berlangganan!

Leave a comment