Script Multiple File Upload Dengan PHP

Selasa, 31 Mei 2011

Konsep utama dalam membuat script multiple file upload ini adalah, kita harus mengupayakan membuat form yang di dalamnya terdapat komponen upload file yang dinamis. Maksud ‘dinamis’ ini adalah secara otomatis dalam form tersebut akan muncul komponen upload file dengan jumlah sebanyak file yang akan diupload.

Konsep membuat form dinamis tersebut, sebenarnya pernah saya bahas dalam artikel yang lain. Namun, bagaimana dengan implementasinya di multiple file upload ini? Secara garis besar hampir sama, namun dalam artikel kali ini akan saya kembangkan sedikit bagaimana membuat form dinamis dengan Javascript.

Perhatikan tampilan berikut ini yang menggambarkan multiple file upload yang akan kita bahas.

Photobucket

Langkah awal untuk upload file adalah memilih jumlah file yang akan diupload. Dalam contoh ini sengaja saya kasih batasan jumlah file yang bisa diupload adalah 6 buah supaya scrollingnya tidak terlalu panjang. But… Anda bisa menambahkan sendiri maksimum jumlah filenya.

Setelah user memilih jumlah file yang akan diupload melalui combo box, selanjutnya ‘secara langsung’ akan muncul komponen upload file sejumlah pilihannya tadi tanpa mensubmit. Untuk memunculkan secara langsung komponen upload file ini, kita menggunakan Javascript.

Photobucket

Nah… bagaimana cara membuatnya? Pertama kita buat terlebih dahulu form dinamis untuk upload filenya.

formupload.html

<html>
<head><title>Multiple File Uploadtitle>head>
<body>
      <form name="myform" enctype="multipart/form-data" action="upload.php" method="POST">

       Pilih Jumlah File

       <select name="jumfile">
           <option value="1">1option>
           <option value="2">2option>
           <option value="3">3option>
           <option value="4">4option>
           <option value="5">5option>
           <option value="6">6option>
       select>

       <br><br>
       <input type="hidden" name="MAX_FILE_SIZE" value="20000000" />

       <div id="selectfile">
       div>

   <br>
   <input type="hidden" name="n"/>
   <input type="submit" name="submit" value="Upload" />
   form>
body>
html>

Perhatikan kode HTML di atas!

Nama komponen untuk memilih banyaknya file yang akan diupload adalah ‘jumfile’. Maksimum ukuran file yang boleh diupload adalah 2MB (perhatikan komponen dengan nama ‘MAX_FILE_SIZE’). Selanjutnya terdapat pula tag

1.<div id="selectfile">

2.div>

Wah buat apa ya tag itu? Tag itu nantinya akan digunakan sebagai bagian untuk menampilkan komponen upload filenya sejumlah pilihan jumlah filenya. Untuk menampilkan komponen tersebut ke dalam bagian

nantinya akan digunakan Javascript DOM.

Berikutnya ada pula komponen . Buat apa nih komponen? Komponen ini digunakan untuk menyimpan informasi tentang jumlah file yang akan diupload. Dalam hal ini nilainya sejumlah pilihan jumlah file. Untuk apa informasi jumlah file ini? Informasi ini akan digunakan untuk script uploadnya, khususnya untuk proses looping. Lho looping? ngapain harus pakai looping? Ya… Karena pada dasarnya proses upload multiple file ini adalah proses upload file yang diulang-ulang sebanyak jumlah filenya. Simpel bukan idenya?

OK.. next.. bagaimana cara membuat komponen upload yang dinamisnya? Sesuai skenario di atas yaitu sejumlah komponen upload akan muncul setelah user memilih jumlah file yang akan diupload, maka kita berikan event onchange pada combo boxnya.

formupload.html

<html>
<head><title>Multiple File Uploadtitle>head>
<body>
      <form name="myform" enctype="multipart/form-data" action="upload.php" method="POST">

       Pilih Jumlah File

       <select name="jumfile" onchange="show()">
           <option value="1">1option>
           <option value="2">2option>
           <option value="3">3option>
           <option value="4">4option>
           <option value="5">5option>
           <option value="6">6option>
       select>

       <br><br>
       <input type="hidden" name="MAX_FILE_SIZE" value="20000000" />

       <div id="selectfile">
       div>

   <br>
   <input type="hidden" name="n"/>
   <input type="submit" name="submit" value="Upload" />
   form>
body>
html>

Pada combo box, kita berikan event ‘onchange’ yang nantinya diarahkan untuk memanggil function ‘show()’ dalam Javascriptnya. Function ‘show()’ inilah yang akan menampilkan komponen upload dinamisnya. Trus… bagaimana bentuk function ‘show()’ Javascriptnya? Ini dia

formupload.html

<html>
<head>
  <title>Multiple File Uploadtitle>
  <script type="text/javascript">

  function show()
       {
           var n = document.myform.jumfile.value;
           var i;
           var string = "";

           for (i=0; i<=n-1; i++)
           {
              string = string + "Pilih File: <input name=\"userfile"+ i + "\" type=\"file\"><br>";
           }

           document.getElementById('selectfile').innerHTML = string;
           document.myform.n.value = n;
       }
   script>
head>
<body>
      <form name="myform" enctype="multipart/form-data" action="upload.php" method="POST">

       Pilih Jumlah File

       <select name="jumfile" onchange="show()">
           <option value="1">1option>
           <option value="2">2option>
           <option value="3">3option>
           <option value="4">4option>
           <option value="5">5option>
           <option value="6">6option>
       select>

       <br><br>
       <input type="hidden" name="MAX_FILE_SIZE" value="20000000" />

       <div id="selectfile">
       div>

   <br>
   <input type="hidden" name="n" />
   <input type="submit" name="submit" value="Upload" />
   form>
body>
html>

Wah bagaimana tuh ide dalam Javascriptnya, kok bisa seperti itu? Konsepnya adalah membuat looping untuk membuat komponen sejumlah n buah. Nilai n ini adalah sama dengan nilai jumlah file yang akan diupload melalui pilihan combo boxnya (n = document.myform.jumfile.value). Namun, untuk setiap komponen tersebut kita harus buat name yang berbeda karena dalam hal ini nama komponen tidak boleh sama, misalnya

<input name="userfile0" type="file">
<input name="userfile1" type="file">
<input name="userfile2" type="file">
.
.
dst

Untuk membuat sejumlah n buah komponen upload file tersebut, maka digunakan looping

for (i=0; i<=n-1; i++)
{
  string = string + "Pilih File: + i + "\" type=\"file\">
";
}

Selanjutnya komponen-komponen tersebut digabung menjadi satu ke dalam sebuah string, dan akhirnya string tersebut ditampilkan ke dalam bagian

dengan cara memberikan perintah:

1.document.getElementById('selectfile').innerHTML = string;

Sedangkan perintah

1.document.myform.n.value = n;

digunakan untuk memberikan nilai pada komponen dengan nilai yang sama dengan n (berasal dari combobox)

OK.. paham ya konsep Javascript untuk membuat form upload dinamis. Sekarang kita fokus ke script PHP untuk proses uploadnya. Pada prinsipnya sama seperti upload single file, namun dalam script ini kita buat looping dalam proses uploadnya.

upload.php



// membaca nilai n dari form upload
$n = $_POST['n']; 

// setting nama folder tempat upload
$uploaddir = 'data/';

// proses upload yang diletakkan dalam looping
for ($i=0; $i<=$n-1; $i++)
{
 // membaca nama file yang diupload di setiap komponen upload
 $fileName = $_FILES['userfile'.$i]['name'];    

 // membaca ukuran file yang diupload di setiap komponen upload
 $fileSize = $_FILES['userfile'.$i]['size'];

 // nama file temporary yang akan disimpan di server
 $tmpName  = $_FILES['userfile'.$i]['tmp_name']; 

 // menggabungkan nama folder dan nama file yang diupload
 $uploadfile = $uploaddir . $fileName;

 // proses upload file ke folder 'data'
 if ($fileSize > 0)
 {
     if (move_uploaded_file($tmpName, $uploadfile))
     {
         echo "File ".$fileName." telah diupload
";
     }
     else
     {
         echo "File ".$fileName." gagal diupload
";
     }
 }
}

?>

Ada hal yang perlu kita perhatikan terkait dengan script di atas. Misalkan kita memilih jumlah file yang akan diupload sejumlah 4 buah. Setelah kita memilih 4 pada combo boxnya, maka akan muncul 4 buah komponen untuk upload file. Namun, dari 4 komponen yang muncul ternyata kita hanya menggunakan 2 komponen saja, sehingga 2 komponen yang lain kosong. (lihat gambar di bawah ini)

Photobucket

Nah… untuk mengantisipasi bahwa proses upload hanya terjadi jika komponen uploadnya telah terisi filenya, maka digunakanlah statement berikut ini dalam script di atas.

if ($fileSize > 0)
{
   ....
}

Idenya adalah dengan mengecek ukuran file yang akan diupload di setiap komponen upload. Bila ukuran filenya > 0 maka dipastikan dalam komponen upload tersebut terdapat file yang akan diupload. Namun jika tidak (ukuran file kurang atau sama dengan 0) maka dianggap tidak ada file yang akan diupload.

OK… selesai deh pembuatan scriptnya. Mudah bukan?? Semoga bermanfaat ya…

[ Download Script ]