<input type="file"> memunculkan tombol "Pilih File". Pengunjung pakai tombol itu buat memilih file dari HP atau laptopnya, misalnya foto profil atau bukti transfer. Supaya isi filenya beneran sampai di server (komputer yang menerima data form), form-nya butuh satu pengaturan tambahan bernama enctype.
🧪 Tebakan cepat: kalau
enctypelupa ditulis, apa yang sampai di server, fotonya atau cuma nama filenya? Tebak dulu, jawabannya ada di bagian "Form upload, bagian per bagian".
Form upload, bagian per bagian
<form method="post" enctype="multipart/form-data">
<label for="foto">Foto profil</label>
<input type="file" id="foto" name="foto" accept="image/*">
<button type="submit">Upload</button>
</form>
Dari atas ke bawah:
<form ...>membungkus semua isian, termasuk tombolnya. Input atau tombol yang ditaruh di luar<form>gak ikut mengirim apa-apa.method="post"artinya data dikirim di dalam permintaan, bukan ditempel di alamat halaman. File cuma bisa ikut kalau pakaipost.enctype="multipart/form-data"adalah cara form membungkus datanya. Cara bawaan form cuma bisa membawa teks, jadi tanpa atribut ini yang sampai cuma nama filenya. Denganmultipart/form-data, isi filenya ikut. Tulis persis begitu:multipart, garis miring,form-data.<input type="file">adalah tombol "Pilih File". Kayak input lainnya, tag ini gak punya tag penutup.name="foto"adalah nama file ini waktu sampai di server. Tanpaname, server gak bisa menemukan filenya.accept="image/*"membatasi jenis file yang bisa dipilih.image/artinya gambar, dan*artinya gambar jenis apa saja: JPG, PNG, WebP.<button type="submit">adalah tombol kirimnya, dan harus ada di dalam<form>yang sama.
Hasilnya: klik "Pilih File", jendela pemilih file cuma menampilkan gambar. Pilih satu foto, klik Upload, fotonya terkirim ke server.
Atur jenis file dengan accept
Isi accept bisa jenis umum atau akhiran file:
accept="image/*": semua gambar.accept="video/*"atauaccept="audio/*": semua video atau semua audio.accept=".pdf": cuma PDF. Beberapa jenis dipisah koma, misalnyaaccept=".pdf,.docx".
accept cuma menyaring jendela pemilih file. Pengunjung masih bisa mengganti saringannya ke "Semua file", jadi server tetap harus mengecek ulang jenis dan ukuran file yang datang.
Banyak file sekaligus dengan multiple
<input type="file" name="galeri" accept="image/*" multiple>
multiple ditulis tanpa nilai, cukup namanya. Dengan atribut ini, pengunjung bisa memilih beberapa file sekaligus. Tanpa multiple, cuma satu file yang bisa dipilih.
⚠️ Jebakan yang sering ketemu
- Lupa
enctype. Form tetap terkirim, tapi yang sampai cuma nama filenya, isinya gak. - Salah tulis
enctype.multipart/formdataataumultipart-form-datagak dikenali, jadi browser balik ke cara bawaan yang cuma bawa teks. - Lupa
name. Filenya sudah dipilih, tapi server gak tahu harus mencarinya pakai nama apa. - Tombol di luar
</form>. Tombolnya gak nyambung ke form, jadi diklik pun gak mengirim apa-apa. acceptdianggap pengaman. Itu cuma saringan biar pengunjung gak salah pilih. Pengecekan file yang sebenarnya tetap tugas server.
TL;DR: File dipilih lewat <input type="file" name="...">. Form-nya pakai method="post" dan enctype="multipart/form-data", kalau gak, yang terkirim cuma nama filenya. accept="image/*" menyaring jenis file, multiple membolehkan banyak file. Input file dan tombol type="submit" ditulis di dalam <form> yang sama, dan server tetap mengecek ulang setiap file.
