Menerapkan unggahan file di bawah html cukup sederhana, tetapi saya hanya memperhatikan bahwa ada atribut 'terima' yang dapat ditambahkan ke <input type="file" ...>tag.
Apakah atribut ini bermanfaat sebagai cara membatasi unggahan file ke gambar, dll? Apa cara terbaik untuk menggunakannya?
Atau, apakah ada cara untuk membatasi jenis file, lebih disukai dalam dialog file, untuk tag input file html?
html
filter
cross-browser
mime-types
Darren Oster
sumber
sumber
input type="file"untuk memvalidasi bahwa hanyaaccepttipe file ed yang dapat dipilih.Jawaban:
The
acceptatribut sangat berguna. Ini adalah petunjuk bagi browser untuk hanya menampilkan file yang diizinkan untuk saat iniinput. Meskipun biasanya dapat ditimpa oleh pengguna, ini membantu mempersempit hasil bagi pengguna secara default, sehingga mereka bisa mendapatkan apa yang mereka cari tanpa harus menyaring ratusan jenis file yang berbeda.Pemakaian
Catatan: Contoh-contoh ini ditulis berdasarkan spesifikasi saat ini dan mungkin tidak benar-benar berfungsi di semua (atau apa saja) browser. Spesifikasi juga dapat berubah di masa mendatang, yang dapat memecahkan contoh-contoh ini.
Dari Spesifikasi HTML ( sumber )
sumber
accept='.jpg,.png,.gif,.pdf,.eps'tidak mengizinkan pemilihan apa pun. Saya mencoba banyak variasi - ruang terbatas, tidak ada karakter titik, dll., Tetapi tidak ada dadu di Chrome v20, jadi saya akhirnya menggunakan jenis pantomim dan itu bekerja dengan sangat baik:accept='image/jpeg,image/gif,image/png,application/pdf,image/x-eps'image/*. Kekecewaan.Value: A set of comma-separated strings, each of which is a valid MIME type, with no parameters.Hanya tipe pantomim. Tidak ada ekstensi. Terserah klien untuk menentukan tipe mime.A string whose first character is a U+002E FULL STOP character (.) -- Indicates that files with the specified file extension are accepted.video/*berarti Anda tidak dapat mengunggah mp4 di Safari, Anda juga harus menentukanvideo/mp4Ya, ini sangat berguna di browser yang mendukungnya, tetapi "pembatasan" adalah untuk kenyamanan pengguna (sehingga mereka tidak dibanjiri dengan file yang tidak relevan) daripada sebagai cara untuk mencegah mereka mengunggah hal-hal yang tidak Anda inginkan. mengunggah.
Didukung di
Berikut adalah daftar jenis konten yang dapat Anda gunakan dengannya, diikuti oleh ekstensi file yang sesuai (meskipun tentu saja Anda dapat menggunakan ekstensi file apa pun):
sumber
accept=".ttf"berfungsi seperti yang diharapkan.Pada 2015 , satu-satunya cara yang saya temukan untuk membuatnya berfungsi baik untuk Chrome dan Firefox adalah dengan meletakkan semua ekstensi yang mungkin ingin Anda dukung, termasuk varian:
Masalah dengan Firefox : Menggunakan
image/jpegjenis pantomim Firefox hanya akan menampilkan.jpgfile, sangat aneh seolah-olah masalah umum.jpegtidak ok ...Apa pun yang Anda lakukan, pastikan untuk mencoba dengan file yang memiliki banyak ekstensi berbeda. Mungkin itu bahkan tergantung pada OS ... Saya kira
acceptcase-sensitive, tapi mungkin tidak di setiap browser.Berikut adalah dokumen MDN tentang penerimaan :
sumber
Atribut accept diperkenalkan di RFC 1867 , yang bermaksud mengaktifkan penyaringan tipe file berdasarkan tipe MIME untuk kontrol pemilihan file. Tetapi pada tahun 2008, sebagian besar, jika tidak semua, browser tidak menggunakan atribut ini. Menggunakan skrip sisi klien, Anda dapat membuat semacam validasi berbasis ekstensi, untuk mengirimkan data dengan jenis yang benar (ekstensi).
Solusi lain untuk mengunggah file lanjutan memerlukan film Flash seperti SWFUpload atau Java Applets seperti JUpload .
sumber
Ini didukung oleh Chrome. Ini tidak seharusnya digunakan untuk validasi, tetapi untuk tipe yang mengisyaratkan OS. Jika Anda memiliki
accept="image/jpeg"atribut dalam unggahan file, OS hanya dapat menampilkan file dari jenis yang disarankan.sumber
accept="image/*"berfungsi pada Firefox, Chrome dan Opera.accept="text/plain"sebagai gantinya.Sudah beberapa tahun, dan Chrome setidaknya memanfaatkan atribut ini. Atribut ini sangat berguna dari sudut pandang kegunaan karena akan menyaring file yang tidak perlu bagi pengguna, membuat pengalaman mereka lebih lancar. Namun, pengguna masih dapat memilih "semua file" dari jenis (atau memotong filter), sehingga Anda harus selalu memvalidasi file di mana itu sebenarnya digunakan; Jika Anda menggunakannya di server, validasi dulu sebelum menggunakannya. Pengguna selalu dapat mem-bypass skrip sisi klien.
sumber
Jika browser menggunakan atribut ini, itu hanya sebagai bantuan bagi pengguna, jadi dia tidak akan mengunggah file multi-megabyte hanya untuk melihatnya ditolak oleh server ...
Sama untuk
<input type="hidden" name="MAX_FILE_SIZE" value="100000">tag: jika browser menggunakannya, itu tidak akan mengirim file tetapi kesalahan yang menghasilkanUPLOAD_ERR_FORM_SIZE(2) kesalahan dalam PHP (tidak yakin bagaimana itu ditangani dalam bahasa lain).Perhatikan ini adalah bantuan untuk pengguna . Tentu saja, server harus selalu memeriksa jenis dan ukuran file di ujungnya: mudah untuk merusak nilai-nilai ini di sisi klien.
sumber
Kembali pada tahun 2008 ini tidak penting karena kurangnya OS ponsel tetapi sekarang hal yang cukup penting.
Ketika Anda mengatur jenis mime yang diterima, maka misalnya pengguna Android diberi dialog sistem dengan aplikasi yang dapat memberinya konten mime yang menerima input file, apa yang hebat karena menavigasi melalui file dalam file explorer pada perangkat seluler lambat dan sering membuat stres .
Satu hal penting adalah bahwa beberapa peramban seluler (berdasarkan versi Android Chrome 36 dan Chrome Beta 37) tidak mendukung pemfilteran aplikasi melalui ekstensi dan beberapa jenis mime.
sumber