Dalam artikel yang pernah saya buat sebelumnya tentang teknik filter file upload, pernah saya jelaskan bagaimana cara memfilter extension dari file yang akan diupload dari sisi server, artinya bahwa proses filter tersebut dilakukan di sisi server. Dengan kata lain melalui teknik ini, filter extension file dilakukan setelah file diupload ke server. Teknik ini memiliki kelemahan, yaitu proses filterisasi file sangat lambat karena file harus diupload dulu ke server (dalam hal ini akan disimpan sementara di direktori temporary) baru dicek apakah extensionnya sesuai persyaratan atau tidak, jika sesuai syarat extension yang diperkenankan maka file akan disimpan di direktori server yang sesungguhnya, namun jika tidak maka file tidak akan disimpan.
Selain teknik di atas, kita bisa memberikan proses filter di sisi client yaitu pada form uploadnya. Melalui teknik ini, ketika user akan mengupload file, hanya akan muncul file-file extension tertentu saja di tombol browse dalam form uploadnya. Sebagai contoh, misalkan user hanya diperkenankan mengupload file image, maka kita bisa atur dalam form uploadnya sedemikian hingga tombol browse nya hanya menampilkan file-file image saja. Teknik ini memiliki kelebihan dibandingkan teknik sebelumnya, yaitu filterisasi dilakukan tanpa harus mengupload file dahulu ke server.
OK lantas bagaimana cara membuatnya? Caranya cukup mudah sekali, yaitu dengan hanya menambahkan atribut accept="..."
pada tag input filenya.
Berikut ini contoh penggunaannya:
<form method="post" enctype="multipart/form-data" action="upload.php"> Pilih File <input name="fileku" type="file" accept="image/*"> <input name="upload" type="submit" value="Upload"> </form>Contoh form di atas akan memfilter file-file image saja dalam proses browse file.
Selain menggunakan
accept="image/*"
, kita bisa juga menggunakan accept="video/*"
untuk memfilter file-file videoContoh:
<input name="fileku" type="file" accept="video/*">dan juga
accept="sound/*"
untuk memfilter file-file audio.Contoh:
<input name="fileku" type="file" accept="audio/*">Mungkin ada di antara Anda yang bertanya, bagaimana dalam filter tersebut diperbolehkan 2 atau lebih format filenya? misalkan image atau audio? caranya cukup digabung menjadi satu saja formatnya seperti ini
<input name="fileku" type="file" accept="audio/*,image/*">Selain penggunaan format:
audio/*
, image/*
atau video/*
, kita juga bisa menggunakan MIME Type untuk memfilter extension filenya. Adapun contohnya:<input name="fileku" type="file" accept="image/gif">untuk memfilter hanya file-file image berextension .gif saja, atau bisa juga gabungan beberapa MIME Type seperti
<input name="fileku" type="file" accept="image/gif,image/jpeg">yang digunakan untuk memfilter file berextension .gif atau .jpg
Namun, berdasarkan eksperimen saya, penggunaan MIME Type untuk filter ini tidak bisa digunakan untuk browser Firefox. CMIIW
Adapun untuk list MIME Type yang bisa Anda gunakan, silakan cek di situs referensi ini.
OK selamat mencoba dan semoga bermanfaat