Form tidak hanya digunakan untuk menerima inputan berupa text saja, namun juga digunakan untuk menerima inputan berupa upload data dari user. Untuk keperluan ini, HTML menyediakan tag input type file.
Fungsi tag input type file dalam pembuatan Form HTML
Tag input dengan atribut type="file" adalah objek form yang digunakan untuk upload file. Pemrosesan upload sendiri akan banyak melibatkan web server (menggunakan PHP). Saya tidak akan membahasnya pemograman PHPnya, namun akan fokus pada kode HTML yang diperlukan.
Dalam menggunakan tag input dengan atribut type="file" ini, kita hanya menambahkan kode berikut kedalam form HTML:
<form> <input type="file"> </form>
Jika anda menjalankan kode tersebut, maka di dalam web browser akan tampil sebuah tombol dengan text keterangan disampingnya. Nama tombol dan text keterangan tersebut akan berbeda-beda tergantung web browser.
Ketika anda men-klik tombol upload ("Browse" pada firefox, dan "Choose File" pada chrome) maka akan keluar jendela untuk memilih file yang akan diupload. Setelah memilih salah satu file yang akan diupload, text keterangan akan berubah menjadi nama file tersebut.
Atribut name: Untuk Pemrosesan Upload Data
Atribut name merupakan atribut paling penting untuk type="file", karena atribut name inilah yang akan menjadi varibel penampung file upload di sisi server nantinya. Berikut cara penulisan atribut name:
<form> <input type="file" name="file_gambar"> </form>
Atribut Accept: Membatasi Tipe Upload Data
Atribut accept digunakan untuk membasi jenis file yang akan diupload, apakah file gambar, file musik, atau file jenis lainnya. Nilai untuk atribut accept ini adalah MIME_type seperti audio/*, video/*, dan  image/*. MIME_type adalah sebuah pengelompokkan khusus untuk file-file di dalam internet . List lengkap dari MIME ini dapat dilihat dari http://en.wikipedia.org/wiki/Internet_media_type.
Contoh berikut akan membatasi file upload untuk file gambar:
<form> <input type="file" name="file_gambar" accept="image/*"> </form>
Namun pembatasan file ini tidak dapat diandalkan, karena user bisa dengan mudah mengganti jenis file yang diupload. Validasi untuk membatasi jenis file sebaiknya dilakukan juga di sisi web server (menggunakan PHP).
Atribut disabled: Menonaktifkan Upload File
Atribut disabled digunakan untuk membuat file upload tidak bisa digunakan. Penggunaan atribut ini biasanya di kombinasikan dengan javascript agar berfungsi maksimal. Misalkan sebuah file upload hanya dapat diisi ketika user telah mengisi form diatasnya.
Atribut disabled hanya memiliki 1 nilai, yaitu dirinya sendiri, yang ditulis dengan disabled="disabled" Berikut contoh penulisannya:
<form> <input type="file" name="upload_gambar" disabled="disabled"> </form>
Atribut id dan class: CSS dan Javascript
Selain atribut type, name, accept dan disabled, kita juga bisa menggunakan atribut umum seperti id dan class dalam tag input type file. Tag id dan class akan dibutuhkan untuk pemograman HTML menggunakan Javascript dan CSS.
Cara Penggunaan tag input type file Dalam Form HTML
Untuk merangkum penggunaan tag input type file beserta atribut-atributnya, saya akan membuat contoh kode HTML untuk semua atribut yang telah kita pelajari:
<!DOCTYPE html> <html> <head> <title>Belajar Tag Input Type=file HTML</title> </head> <body> <h4>Belajar tag Input type="file" di duniailkom.com:</h4> <form name="form_upload" > Input type="file" dasar : <input type="file"> <br /> Input type="file" tipe data gambar : <input type="file" accept="image/*"/> <br /> Input type="file" disabled : <input type="file" accept="image/*" disabled="disabled"> </form> </body> </html>
Jika anda ingin menjalankan form diatas untuk diproses oleh PHP, kita perlu menambahkan beberapa atribut dan aturan untuk tag form.
Selain menggunakan tag input, untuk mengirimkan data ke web server (proses upload), pada tag form dari HTML perlu ditambahkan sebuah atribut enctype dengan nilai multipart/form-data. Atribut ini menginstruksikan kepada web server bahwa data yang dikirim berisi file yang diupload. Selain itu proses pengiriman harus menggunakan method="POST". Lebih jauh tentang penggunaan ini akan kita bahas dalam tutorial PHP, karena akan banyak menggunakan PHP.
Dalam tahap ini kita cukup mengetahui bahwa agar form dapat mengirimkan file, format awal form harus berbentuk:
<form name="nama_form" enctype="multipart/form-data" action="proses.php" method="POST">
Sehingga contoh formnya akan menjadi sebagai berikut:
<!DOCTYPE html> <html> <head> <title>Belajar Tag Input Type=file HTML</title> </head> <body> <h4>Belajar tag Input type="file" di duniailkom.com:</h4> <form name="nama_form" enctype="multipart/form-data" action="proses.php" method="POST"> Upload Gambar: <input type="file" accept="image/*"/> <br /> <input type="submit" value="Proses Upload"> </form> </body> </html>
Di dalam tutorial form html kali ini kita telah mempelajari cara membuat form untuk keperluan upload file dengan tag input type file, walaupun pemrosesan file yang diupload tidak bisa ditangani dengan HTML saja, namun harus melibatkan bahasa pemograman web seperti PHP.
Selanjutnya kita akan mempelajari tentang tag input type image.
Cara menghilangkan kata "No file chosen't" nya gimana mas ? CSS nya mas kalau dibutuhkan
Mengubah text tersebut cukup sulit, beberapa trik yang bisa dilakukan adalah dengan menyembunyikan form upload, kemudian menggantinya dengan gambar/teks. Untuk contohnya, bisa kesini: http://jsfiddle.net/Tdkre/1/
Artikelnya sangat membantu dan menambah ilmu. Terima kasih. Mas sekalian saya mau tanya untuk kasus edit data, dimana kita mengambil data dari database untuk di jadikan value bagaimana ya mas?
<input type="file" name="photo" value='' accept="/image/*">
kalau contoh diatas nama file photo tetap tidak bisa tampil, bagaimana mas solusinya untuk contoh diatas sehingga data di database bisa terbaca di value?
Terima kasih sebelumnaya
nyimak juga
terima kasih mas atas bantuannya, kususnya bagi saya yang masih duduk di bangku sekolahan
Artikel yang menjelaskan tentang pembatasan jenis file nya sangat membantu…
Terimakasih…
Siip, lanjut gan :)
Dan dimana membuat tombol Download di notepad biasa???
Silahkan copy paste kode diatas ke dalam file notepad. Lalu save sebagai file HTML. Jika agan ragu gimana caranya, silahkan ikuti tutorial HTML dasar dulu: https://www.duniailkom.com/tutorial-belajar-html-dasar-untuk-pemula/
Oh ya, untuk memproses file yang udah di upload harus menggunakan PHP gan. Karena cukup kompleks, saat ini tutorial lengkapnya baru tersedia di eBook PHP Uncover Duniailkom.
Mas mau nanya nih, sedikit out of topic sih
saya buat form buat upload gambar, trus saya mau ambil attribut gambar yg saya updload untuk disimpan ke database menggunakan (php) $_FILES['x']['name'] , $_FILES['x']['tmp_name'], dsb, pada saat upload gambar yg berukuran 140kb baik2 saja, tapi tiap saya upload gambar yang 2mb , $_FILES['x']['tmp_name'],dsb nya tidak muncul yang muncul hanya $_FILES['x']['name'] saya.
Pertanyaan saya, Apa ada batas ukuran untuk mengupload gambar ?
Maaf kalo kata2nya membingungkan ^.^'
Betul gan, ada batas dari upload file. Bisa di cek di file setingan PHP: php.ini, cari keterangan:
upload_max_filesize = 2M, dan
post_max_size = 8M
Ini artinya, untuk setiap tag <input type="file"> ukuran file tidak boleh melebihi 2MB, dan total seluruh file yang diupload tidak boleh melebihi 8MB (jika ada beberapa file yang mau diupload dalam 1 form).
Solusinya tinggal naikkan angka ini, seperti:
upload_max_filesize = 100M, dan
post_max_size = 100M
Sekarang limit file upload sudah jadi 100MB. Save, lalu restart apache agar setingan php.ini tersebut bisa jalan.
cara bikin file phpnya gimana mas??? please someone tell me
Memproses file upload di PHP cukup rumit, karena banyak yang mesti dipelajari, belum lagi pengaturan php.ini terkait file upload. Saat ini tutorialnya belum tersedia di duniailkom.
Silahkan di search di google gan, atau bisa juga order buku PHP Uncover duniailkom, disana saya membahas form upload dalam 50 halaman lebih.
Mas maaf mau nanya. Cara biar kita mengatur file yg diupload hanya type file jpg gmn ya mas? jd file yg bertipe png dsb gk bisa diupload gitu mas
Yang seperti itu harus di cek di PHP, karena hanya di PHP-lah validasi form dilakukan. Kalau pengen yang sederhana, bisa menggunakan atribut accept dari HTML5:
<input type="file" name="file_upload" id="file_upload" accept=".jpg">
Tp yang seperti ini bisa dilewati dengan mudah.
Kalau untuk ukuran filenya bisa dibatas nggak mas, kan biasanya saya lihat ada yang suka dibatas?
Terima kasih..
Yup bisa, pembatasan file upload dan juga untuk validasi isian form dilakukan di sisi server pakai PHP. Jadi harus digabung antara HTML dan PHP.
Maaf mau tanya. Gimana caranya kalau pas kita sudah mentukan gambarnya dan sudah kita pilih, lalu gambar yang kita pilih bisa tampil, jadi bukan hanya nama file saja. Ada caranya tidak ya. terima kasih
upload_max_filesize = 100M
post_max_size = 100M
Ukuran M tersebut sudah berarti megabyte bang? ga harus di bikin 1024 atau 1048 dan seterusnya