Kamis, 13 Desember 2012

Upload Banyak File dengan php

Beberapa waktu lalu saya sempat menulis tentang bagaimana membuat form serta script upload file dengan php, tapi masih dengan cara melampirkan satu file saja. Berikut ini saya akan menjelaskan lagi bagaimana jika yang di upload terdiri dari beberapa file yang dikirim secara bersamaan dengan php.

Kita akan buat sebuah form untuk banyak file lengkap dengan judul seperti tampilan berikut :

upload banyak file
Pada form diatas bisa dilihat bahwa nantinya masing2 file yang diupload, disertakan judul dalam bentuk text sehingga keduanya (judul dan file dikirim secara bersamaan).
Perintahnya membuat form diatas seperti ini :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Upload banyak file dengan php</title>
<style type="text/css">
#form-upload {
 width:500px;
 margin:0 auto;
 border:1px solid #ccc;
 border-radius:10px;
 padding:10px;
 background-color:#E2FEEA;
 font:14px "Trebuchet MS";
}
</style>
</head>
<body>
<div id="form-upload">
<form action="file-upload.php" method="post" enctype="multipart/form-data">
  <h3 align="center">Isikan judul dan pilih file yang akan di upload :</h3>
  <p> File 1<br />Judul : <input name="judul[]" type="text" size="30" maxlength="30" />  <input name="userfile[]" type="file" /></p>
  <p>File 2<br />Judul :   <input name="judul[]" type="text" size="30" maxlength="30" /> <input name="userfile[]" type="file" /></p>
  <p>File 3<br /> Judul :  <input name="judul[]" type="text" size="30" maxlength="30" /> <input name="userfile[]" type="file" /></p>
  <p>* Hanya file gambar jpg/gif/png</p>
  <p align="center"><input name="btnKirim" type="submit" id="btnKirim" value="Kirim File" /></p>
</form>
</div>
</body>
</html>

Script diatas bisa disimpan dengan nama upload.php.
Jika anda amati script membuat form diatas ( elemen form judul[] dan userfile[]), sayamenggunakan objek textfield dan file field dengan jenis array sehingga memungkinkan kita menambahnya sebanyak2nya sesuai keperluan. Jangan lupa

Formnya sudah jadi tinggal membuat file yang menanggani form upload dan nanti disimpan dengan nama file-upload.php. Isi filenya seperti berikut :

<?php
$namafolder="photo/"; //tempat menyimpan file
for($i=0; $i<count($_FILES['nama_file']); $i++) 
{
  if (!empty($_FILES["nama_file"]["tmp_name"][$i]))
  {
    $jenis_gambar=$_FILES['nama_file']['type'][$i];
    $judul_gambar=$_POST['judul'][$i];
    if($jenis_gambar=="image/jpeg" || $jenis_gambar=="image/jpg" || $jenis_gambar=="image/gif" || $jenis_gambar=="image/x-png")
    {           
      $gambar = $namafolder . basename($_FILES['nama_file']['name'][$i]);       
      if (move_uploaded_file($_FILES['nama_file']['tmp_name'][$i], $gambar)) {
        //tampilkan ke layar
        echo "Judul Gambar : ".$judul_gambar."<br />";
        echo "Jenis Gambar : ".$jenis_gambar."<br />";
        echo "<img src=\"$gambar\" width=\"100\" alt=\"$judul_gambar\" /><br />";
        //tambahkan proses menyimpan database jika diperlukan seperti berikut 
        //mysql_query("insert into tb_mgambar(judul_gambar,nama_file) values('$judul_gambar','$gambar')") or die(mysql_error());
       } 
     } 
     else 
     {
       echo "Jenis gambar yang anda kirim salah. Harus .jpg .gif .png<br />";
     }
   }
}
?>

Anda bisa sesuaikan script upload banyak file diatas sesuai keperluan seperti untuk jenis file selain gambar (rar, pdf, mp3 dll) atau juga bisa anda kembangkan berbasis database seperti photo galleri.
Hasil tampilan akhir jika berhasil upload akan tampil seperti berikut :
tampilan hasil upload banyak file
Silahkan download contoh lengkapnya : Download Script Upload banyak File.
Cara menjalankanya cukup anda ekstrak di dalam folder web server (htdocs), dan jalankan file upload-banyak.php.
Semua script serta contoh uploadnya sudah saya coba jalankan dan semuanya bisa dipertanggungjawabkan :). Jika ada kesalahan, silahkan komentar dibawah ini.

Semoga bermanfaat, dan selamat mencoba.

0 komentar:

Posting Komentar

 
Design by Wordpress Theme | Bloggerized by Free Blogger Templates | free samples without surveys