Cara menggunakan html file upload directory

Tutorial Cara Upload File Dengan PHP

• Oleh:
• 10-10-2016, 13:27:42
• Kategori:

 dengan  | Dalam sebuah website atau aplikasi website biasanya kita perlu untuk menyertakan file, baik itu file gambar, foto, lagu, video, dokumen word, pdf dan lain sebagainya. Misalnya ketika ingin mengirim email dimana kita bisa menyertakan attachmen berupa file sebagai pelengkap email yang kita kirim, atau ketika posting di sosial media kita bisa memposting gambar atau video.

Untuk mengupload file ke server, kita bisa menggunakan  yang merupakan bahasa  server side.

 File (Image: zoho.com)

Pada tutorial kali Jurnalweb akan sedikit mengajarkan bagaimana caranya mengupload file server dengan menggunakan , file yang diuplaod bisa berupa gambar, musik, video ataupun dokumen. Cara nya cukup mudah, scriptnya pun singkat, hanya perlu satu file saja dan tidak memerlukan database. Karena kita hanya akan belajar bagaimana  dengan PHP.

Buat Form

Pertama kita akan buat form dulu dengan menggunakan HTML, form ini tentu saja untuk mengambil daftar gambar yang ada di komputer, dan untuk menampilkan sebuah tombol untuk menguplaod.

Nama file: index.

	
	



	
	upload">upload

Keterangan:

• method=”POST” : Untuk menentukan motode pengiriman, apakah POST atau GET
• enctype=”multipart/form-data” : Untuk menentukan jenis dokumen yang akan di 
• type = “file”: untuk memastikan bahwa kita membuat sebuah field untuk browse semua gambar yang ada di komputer.

Script  File dengan 

Setelah form dibuat, tentu saja tinggal membuat script untuk  file yang ada ke direktori yang diinginkan, dalam tutorial ini gambar akan di  ke folder yang bernama uploads.

Untuk mengupload file website di hosting, Anda bisa menguploadnya dengan file manager di cPanel. Untuk panduan cara uploadnya, silahkan mengikuti panduan berikut,

1. Login ke cPanel hosting, kemudian cari menu Files dan pilih bagian File Manager 

2. Selanjutnya pilih directory atau folder public_html untuk meletakan file di root directory domain (atau bisa pada directory manapun bebas, sesuai dengan kebutuhan Anda)

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:

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:

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:

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:

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:

   




   
Belajar tag Input type="file" di duniailkom.com:
   


   Input type="file" dasar :
   
   


   Input type="file" tipe data gambar :
   
   


   Input type="file" disabled :
   

   

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:

Sehingga contoh formnya akan menjadi sebagai berikut:

   




   
Belajar tag Input type="file" di duniailkom.com:
   

   Upload Gambar: 
   

   

   

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.