Cara Mengunggah File Dengan PHP (Dengan Contoh Source Code)

Dalam tutorial kali ini, saya akan menjelaskan basic upload file dalam PHP. Pertama, kita akan membahas opsi konfigurasi PHP yang harus ada agar pengunggahan file nya sukses. Setelah itu, kita akan mengembangkan praktek beserta contoh ke dunia nyata tentang cara upload file ini.

Konfigurasikan Pengaturan PHP

Ada beberapa pengaturan konfigurasi PHP yang kalian harus periksa terlebih dahulu agar pengunggahan file yang sukses. Di bagian ini, kita akan membahas setiap opsi yang penting terkait pengunggahan file PHP. Opsi-opsi ini dapat dikonfigurasi dalam file php.ini.

Jika kalian tidak yakin di mana menemukan file php.ini kalian, kalian bisa menggunakan php_ini_loaded_file() untuk menemukannya. Cukup buat file PHP di server kalian dengan baris berikut, dan buka dari browser.

1:  <?php echo php_ini_loaded_file(); ?>  

Berikut adalah kutipan dari file setup dengan beberapa default yang berguna

1:  ; Whether to allow HTTP file uploads.  
2:  file_uploads = On  
3:  ; Temporary directory for HTTP uploaded files.  
4:  ; Will use system default if not set.  
5:  ;upload_tmp_dir =   
6:  ; Maximum allowed size for uploaded files.  
7:  upload_max_filesize = 16M  
8:  ; Maximum number of files that can be uploaded via a single request  
9:  max_file_uploads = 20  
10:  ; Maximum size of POST data that PHP will accept.  
11:  post_max_size = 20M  
12:  max_input_time = 60  
13:  memory_limit = 128M  
14:  max_execution_time = 30  

Pengaturan kunci (Setting Key)

* file_uploads

Value dari file_uploads directive harus disetel ke On untuk memungkinkan pengunggahan file. Nilai default dari direktif ini adalah On.

* upload_max_filesize

Upload_max_filesize direktive memungkinkan kalian untuk mengkonfigurasi ukuran maksimum yang diupload.

Secara default, ini diatur ke 2M (dua megabyte), dan kalian bisa mengganti pengaturan ini menggunakan file .htaccess juga. Dua megabyte tidak terlalu banyak menurut standar sekarang, jadi kalian mungkin harus meningkatkan ini. 

Jika kalian mendapatkan error (kesalahan) bahwa file melebihi upload_max_filesize ketika kalian mencoba mengunggah file, maka kalian perlu meningkatkan nilai ini. Jika kalian melakukannya, pastikan juga untuk meningkatkan post_max_size (lihat di bawah).

* upload_tmp_dir

Menetapkan direktori sementara yang akan digunakan untuk menyimpan file yang diunggah. Dalam banyak kasus, kalian tidak perlu khawatir tentang pengaturan ini. Jika kalian tidak mengaturnya, sistem default temp directory akan digunakan.

* post_max_size

Direktif post_max_size memungkinkan kalian untuk mengkonfigurasi ukuran maksimum data POST. Karena file diunggah dengan permintaan POST, nilai ini harus lebih besar dari yang kalian tetapkan untuk perintah upload_max_filesize. Misalnya, jika upload_max_filesize kalian 16M (16 megabyte), kalian mungkin ingin menetapkan post_max_size menjadi 20M.

* max_file_uploads

Ini memungkinkan kalian untuk mengatur jumlah maksimum file yang dapat diunggah pada suatu waktu. Standarnya adalah 20, jumlah yang masuk akal.

* max_input_time

Ini adalah jumlah maksimum second script diizinkan untuk mengurai input data. kalian harus menetapkannya ke value yang wajar jika kalian berurusan dengan upload file besar. 60 (60 detik) adalah nilai yang lumayan bagus untuk sebagian besar aplikasi.

* memory_limit

Directivf memory_limit menunjukkan jumlah maksimum memori yang dapat dikonsumsi script. Jika kalian menghadapi masalah saat mengunggah file besar, kalian harus memastikan bahwa nilai dari direktif ini lebih besar dari yang Anda tetapkan untuk direktif post_max_size. Nilai default adalah 128M (128 megabyte), jadi kecuali kalian memiliki post_max_size yang sangat besar dan upload_max_filesize, kalian tidak perlu khawatir tentang hal ini.

* max_execution_time

Jumlah maksimum detik script diizinkan untuk dijalankan. Jika kalian menghadapi masalah saat mengunggah file besar, kalian dapat mempertimbangkan untuk meningkatkan nilai ini. 30 (30 detik) seharusnya berfungsi dengan baik untuk sebagian besar aplikasi.

Sekarang mari kita membangun contoh nyata untuk mendemonstrasikan pengunggahan file dalam PHP.

Membuat Form HTML

Setelah kalian mengonfigurasi pengaturan PHP seperti yang sudah saya jelaskan di atas, sekarang kalian sudah siap untuk mencoba kemampuan mengunggah file PHP.

untuk source code contoh kalian bisa lihat dan clone (Download) di Repositori GitHub saya, yang akan saya bahas di dalam artikel kali ini. Jadi, jika kalian ingin ikut mempraktekan apa yang saya ajarkan di tutorial ini, silahkan lanjutkan membaca dan juga unduh source code nya secara gratis dari GitHub.

Kita akan membuat dua file PHP: index.php dan upload.php. File index.php berisi kode yang bertanggung jawab untuk menampilkan form upload file. Di sisi lain, file upload.php bertanggung jawab untuk mengunggah file ke server.

Juga, file akan diunggah di direktori upload_files, jadi kalian perlu memastikan bahwa folder ini ada dan dapat ditulis oleh pengguna web-server.

Di bagian ini, kita akan membahas bagian-bagian kunci dari file index.php.

Mari kita lihat di file index.php pada GitHub:

 

1:  <?php  
2:  session_start();   
3:  ?>  
4:  <!DOCTYPE html>  
5:  <html>  
6:  <head>  
7:   <title>PHP File Upload</title>  
8:  </head>  
9:  <body>  
10:   <?php  
11:    if (isset($_SESSION['message']) && $_SESSION['message'])  
12:    {  
13:     printf('<b>%s</b>', $_SESSION['message']);  
14:     unset($_SESSION['message']);  
15:    }  
16:   ?>  
17:   <form method="POST" action="upload.php" enctype="multipart/form-data">  
18:    <div>  
19:     <span>Upload a File:</span>  
20:     <input type="file" name="uploadedFile" />  
21:    </div>  
22:    <input type="submit" name="uploadBtn" value="Upload" />  
23:   </form>  
24:  </body>  
25:  </html>  

Kalian bisa menggunakan CSS berikut untuk memberikan bentuk tampilan yang lebih menarik.

1:  div.upload-wrapper {  
2:   color: white;  
3:   font-weight: bold;  
4:   display: flex;  
5:  }  
6:  input[type="file"] {  
7:   position: absolute;  
8:   left: -9999px;  
9:  }  
10:  input[type="submit"] {  
11:   border: 3px solid #555;  
12:   color: white;  
13:   background: #666;  
14:   margin: 10px 0;  
15:   border-radius: 5px;  
16:   font-weight: bold;  
17:   padding: 5px 20px;  
18:   cursor: pointer;  
19:  }  
20:  input[type="submit"]:hover {  
21:   background: #555;  
22:  }  
23:  label[for="file-upload"] {  
24:   padding: 0.7rem;  
25:   display: inline-block;  
26:   background: #fa5200;  
27:   cursor: pointer;  
28:   border: 3px solid #ca3103;  
29:   border-radius: 0 5px 5px 0;  
30:   border-left: 0;  
31:  }  
32:  label[for="file-upload"]:hover {  
33:   background: #ca3103;  
34:  }  
35:  span.file-name {  
36:   padding: 0.7rem 3rem 0.7rem 0.7rem;  
37:   white-space: nowrap;  
38:   overflow: hidden;  
39:   background: #ffb543;  
40:   color: black;  
41:   border: 3px solid #f0980f;  
42:   border-radius: 5px 0 0 5px;  
43:   border-right: 0;  
44:  }  

CSS pada dasarnya menyembunyikan input file asli dan menata elemen span dan label yang menyertainya.

Meskipun mungkin terlihat seperti bentuk PHP pada umumnya, ada perbedaan penting dalam nilai atribut enctype dari tag <form>. Ini perlu diatur ke multipart/form-data karena form berisi file field.

Atribut enctype menentukan jenis pengkodean yang harus digunakan ketika formulir dikirimkan, dan dibutuhkan salah satu dari tiga value berikut:

• application/x-www-form-urlencoded: ini adalah nilai default ketika kalian tidak menetapkan nilai dari atribut enctype secara eksplisit. Dalam hal ini, karakter dikodekan sebelum dikirim ke server. Jika kalian tidak memiliki file field dalam formulir kalian, kalian harus menggunakan value ini untuk atribut enctype.
• multipart/form-data: Ketika kalian menggunakan nilai multipart/form-data untuk atribut enctype, ini memungkinkan kalian untuk mengunggah file menggunakan metode POST. Juga, memastikan bahwa karakter tidak dikodekan ketika formulir dikirimkan.
• text/plain: Ini umumnya tidak digunakan. Dengan pengaturan ini, data dikirim tanpa dikodekan (unencoded).

Selanjutnya, kita menampilkan file field, yang memungkinkan kalian memilih file dari komputer kalian.

 

1:  <input type="file" name="uploadedFile" />  

Selain itu, kita telah menampilkan pesan di bagian atas formulir. Pesan ini menunjukkan status unggahan file, dan itu akan di set dalam variabel session dengan script upload.php. Kita akan melihat lebih lanjut tentang ini di bagian selanjutnya.

 

1:  <?php  
2:    if (isset($_SESSION['message']) && $_SESSION['message'])  
3:    {  
4:     printf('<b>%s</b>', $_SESSION['message']);  
5:     unset($_SESSION['message']);  
6:    }  
7:  ?>  

Jadi itu ringkasan isi file index.php. Di bagian selanjutnya, kita akan melihat cara menangani file yang diunggah di sisi server.

Membuat Logika Upload (Upload Logic)

Di bagian sebelumnya, kita membuat formulir HTML yang ditampilkan di sisi klien dan memungkinkan kalian untuk mengunggah file dari komputer kalian. Di bagian ini, kita akan melihat mitra sisi server yang memungkinkan kalian menangani file yang diunggah.

Tarik kode dari file upload.php di GitHub. Kita akan membahas bagian penting dari file itu.

Di file upload.php, kita telah memeriksa apakah itu permintaan POST yang valid di tempat pertama.

1:  if (isset($_POST['uploadBtn']) && $_POST['uploadBtn'] == 'Upload') {  
2:  ...  
3:  }  

Di PHP, ketika file diunggah, variabel superglobal $_FILES diisi dengan semua informasi tentang file yang diunggah. Ini diinisialisasi sebagai array dan dapat berisi informasi berikut untuk unggahan file yang sukses.

• tmp_name: Jalur sementara tempat file diunggah disimpan dalam variabel ini.
• name: Nama sebenarnya dari file disimpan dalam variabel ini.
• size: menunjukkan ukuran file upload dalam bytes.
• type: berisi jenis mime file upload.
• error: Jika ada kesalahan saat unggahan file, variabel ini diisi dengan pesan error yang sesuai. Dalam kasus pengunggahan file yang berhasil, ini berisi 0, yang dapat kalian bandingkan dengan menggunakan konstanta UPLOAD_ERR_OK.

Setelah memvalidasi permintaan POST, kita memeriksa bahwa unggahan file berhasil.

1:  if (isset($_FILES['uploadedFile']) && $_FILES['uploadedFile']['error'] === UPLOAD_ERR_OK) {  
2:  ...  
3:  }  

Kalian bisa bisa melihat bahwa variabel $_FILES adalah array multi-dimensi, elemen pertama adalah nama file field, dan elemen kedua memiliki informasi tentang file yang diunggah, seperti yang baru saja kita bahas di atas.

Jika unggahan file berhasil, kita menginisialisasi beberapa variabel dengan informasi tentang file yang diunggah.

1:  // get details of the uploaded file  
2:  $fileTmpPath = $_FILES['uploadedFile']['tmp_name'];  
3:  $fileName = $_FILES['uploadedFile']['name'];  
4:  $fileSize = $_FILES['uploadedFile']['size'];  
5:  $fileType = $_FILES['uploadedFile']['type'];  
6:  $fileNameCmps = explode(".", $fileName);  
7:  $fileExtension = strtolower(end($fileNameCmps));  

Dalam cuplikan source code di atas, kita juga menemukan ekstensi file yang diunggah dan menyimpannya dalam variabel $fileExtension.

Karena file yang diunggah mungkin berisi spasi dan karakter khusus lainnya, lebih baik untuk membersihkan nama file, dan itu persis yang telah kita lakukan di cuplikan berikut.

       

1:  $newFileName = md5(time() . $fileName) . '.' . $fileExtension;  

Sangat penting bahwa kalian membatasi jenis file yang dapat diunggah ke ekstensi tertentu dan tidak mengizinkan semuanya menggunakan form unggahan. 

Kita telah melakukannya dengan memeriksa ekstensi file yang diunggah dengan serangkaian ekstensi yang ingin kita izinkan untuk mengunggah.

       

1:  $allowedfileExtensions = array('jpg', 'gif', 'png', 'zip', 'txt', 'xls', 'doc');  
2:  if (in_array($fileExtension, $allowedfileExtensions)) {  
3:  ...  
4:  }  

Terakhir, kita menggunakan fungsi move_uploaded_file untuk memindahkan file yang diunggah ke lokasi spesifik pilihan kita.

1:  // directory in which the uploaded file will be moved  
2:  $uploadFileDir = './uploaded_files/';  
3:  $dest_path = $uploadFileDir . $newFileName;  
4:  if(move_uploaded_file($fileTmpPath, $dest_path))  
5:  {  
6:   $message ='File sukses di upload.';  
7:  }  
8:  else  
9:  {  
10:   $message = 'There was some error moving the file to upload directory. Please make sure the upload directory is writable by web server.';  
11:  }  

Fungsi move_uploaded_file membutuhkan dua argumen. Argumen pertama adalah nama file dari file yang diunggah, dan argumen kedua adalah jalur tujuan di mana Anda ingin memindahkan file.

Terakhir, kita mengarahkan pengguna ke file index.php. Juga, kita mengatur pesan yang sesuai dalam variabel session, yang akan ditampilkan kepada pengguna setelah pengalihan dalam file index.php.

Bagaimana Semua Ini Bisa Bekerja Secara Bersamaan..?

Jangan lupa untuk membuat direktori upload_files dan membuatnya dapat ditulis oleh pengguna web-server. Selanjutnya, lanjutkan dan jalankan file index.php, yang seharusnya menampilkan form pengunggahan file yang terlihat seperti ini:

Klik pada tombol Browse - yang akan membuka kotak dialog yang memungkinkan kalian untuk memilih file dari komputer kalian. Pilih file dengan salah satu ekstensi yang diizinkan di script kita, dan klik tombol Unggah.

Itu harus mengirimkan form, dan jika semuanya berjalan dengan baik, kalian akan melihat file yang diunggah di direktori upload_files. kalian juga dapat mencoba mengunggah file lain dengan ekstensi yang tidak diizinkan, dan memeriksa apakah script kita mencegah upload tersebut.

Mengatasi Kesalahan Umum (Resolving Common Errors)

Banyak hal yang bisa salah selama pengunggahan file yang dapat mengakibatkan kesalahan (error) terjadi. kalian bisa memeriksa kesalahan persis yang terjadi selama pengunggahan menggunakan $ _FILES ['uploadedFile'] ['error']. Berikut penjelasan dari kesalahan tersebut:

* File Terlalu Besar

UPLOAD_ERR_INI_SIZE dan UPLOAD_ERR_FORM_SIZE terjadi ketika ukuran file yang diunggah lebih dari nilai yang ditentukan dalam php.ini atau bentuk HTML. kalian bisa mengatasi kesalahan ini dengan meningkatkan batas ukuran unggahan atau memberi tahu pengguna sebelumnya.

* Folder Sementara Hilang

UPLOAD_ERR_NO_TMP_DIR dilaporkan ketika folder sementara untuk mengunggah file hilang. UPLOAD_ERR_NO_FILE dilaporkan jika tidak ada file untuk diupload.

* Unggahan Sebagian atau Tidak Dapat Menulis ke Disk

Kalian akan mendapatkan UPLOAD_ERR_PARTIAL jika file hanya dapat diunggah sebagian dan UPLOAD_ERR_CANT_WRITE jika file tidak dapat ditulis ke disk.

* Ekstensi PHP Menghentikan Pengunggahan File

(Terkadang), kalian akan mendapatkan kesalahan UPLOAD_ERR_EXTENSION karena beberapa ekstensi menghentikan pengunggahan file. Yang ini akan membutuhkan penyelidikan lebih lanjut oleh kalian untuk mencari tahu ekstensi mana yang menyebabkan masalah.

Berikut adalah kode lengkap dari upload.php yang akan menampilkan pesan kepada pengguna di halaman upload jika upload berhasil atau gagal. Informasi tentang berhasil atau tidaknya upload disimpan di $ _SESSION ['message']

1:  <?php  
2:  session_start();  
3:  $message = '';   
4:  if (isset($_POST['uploadBtn']) && $_POST['uploadBtn'] == 'Upload')  
5:  {  
6:   if (isset($_FILES['uploadedFile']) && $_FILES['uploadedFile']['error'] === UPLOAD_ERR_OK)  
7:   {  
8:    // get details of the uploaded file  
9:    $fileTmpPath = $_FILES['uploadedFile']['tmp_name'];  
10:    $fileName = $_FILES['uploadedFile']['name'];  
11:    $fileSize = $_FILES['uploadedFile']['size'];  
12:    $fileType = $_FILES['uploadedFile']['type'];  
13:    $fileNameCmps = explode(".", $fileName);  
14:    $fileExtension = strtolower(end($fileNameCmps));  
15:    // sanitize file-name  
16:    $newFileName = md5(time() . $fileName) . '.' . $fileExtension;  
17:    // check if file has one of the following extensions  
18:    $allowedfileExtensions = array('jpg', 'gif', 'png', 'zip', 'txt', 'xls', 'doc');  
19:    if (in_array($fileExtension, $allowedfileExtensions))  
20:    {  
21:     // directory in which the uploaded file will be moved  
22:     $uploadFileDir = './uploaded_files/';  
23:     $dest_path = $uploadFileDir . $newFileName;  
24:     if(move_uploaded_file($fileTmpPath, $dest_path))   
25:     {  
26:      $message ='File is successfully uploaded.';  
27:     }  
28:     else  
29:     {  
30:      $message = 'There was some error moving the file to upload directory. Please make sure the upload directory is writable by web server.';  
31:     }  
32:    }  
33:    else  
34:    {  
35:     $message = 'Upload failed. Allowed file types: ' . implode(',', $allowedfileExtensions);  
36:    }  
37:   }  
38:   else  
39:   {  
40:    $message = 'There is some error in the file upload. Please check the following error.<br>';  
41:    $message .= 'Error:' . $_FILES['uploadedFile']['error'];  
42:   }  
43:  }  
44:  $_SESSION['message'] = $message;  
45:  header("Location: index.php");  

.

Kesimpulan

Hari ini, kita membahas dasar-dasar upload file dalam PHP. Di paruh pertama artikel, kita membahas berbagai opsi konfigurasi yang harus ada agar pengunggahan file berfungsi. Kemudian kita melihat contoh dunia nyata yang menunjukkan bagaimana file upload berfungsi di PHP.

Saya harap kalian menikmati tutorial dalam artikel ini, dan jangan ragu untuk memposting pertanyaan dan saran kalian di kolom komentar di bawah!