Beberapa waktu lalu, saya pernah menulis artikel mengenai cara membuat script upload file
ke folder yang berada di server. Akan tetapi, script upload file yang
dibahas di situ hanya bisa mengupload sebuah file dalam sekali upload.
Sehingga bila kita ingin mengupload 5 buah file, maka kita harus lakukan
langkah yang sama berulang-ulang sebanyak 5 kali.
Nah… tidak bisakah kita membuat script yang memungkinkan kita bisa
mengupload lebih dari satu file sekaligus? Oh tentu bisa donk. With programming, everything is possible 
Hal itulah yang akan dibahas dalam artikel kali ini.
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.
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.
Nah… bagaimana cara membuatnya? Pertama kita buat terlebih dahulu form dinamis untuk upload filenya.
formupload.html
01.<html>02.<head><title>Multiple File Uploadtitle>head>03.<body>04.<form name="myform" enctype="multipart/form-data" action="upload.php" method="POST">05. 06.Pilih Jumlah File07. 08.<select name="jumfile">09.<option value="1">1option>10.<option value="2">2option>11.<option value="3">3option>12.<option value="4">4option>13.<option value="5">5option>14.<option value="6">6option>15.select>16. 17.<br><br>18.<input type="hidden" name="MAX_FILE_SIZE" value="20000000" />19. 20.<div id="selectfile">21.div>22. 23.<br>24.<input type="hidden" name="n"/>25.<input type="submit" name="submit" value="Upload" />26.form>27.body>28.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
01.<html>
02.<head><title>Multiple File Uploadtitle>head>
03.<body>04.<form name="myform" enctype="multipart/form-data" action="upload.php" method="POST">05. 06.Pilih Jumlah File07. 08.<select name="jumfile" onchange="show()">09.<option value="1">1option>10.<option value="2">2option>11.<option value="3">3option>12.<option value="4">4option>13.<option value="5">5option>14.<option value="6">6option>15.select>16. 17.<br><br>18.<input type="hidden" name="MAX_FILE_SIZE" value="20000000" />19. 20.<div id="selectfile">21.div>22. 23.<br>24.<input type="hidden" name="n"/>25.<input type="submit" name="submit" value="Upload" />26.form>27.body>28.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
01.<html>
02.<head>
03.<title>Multiple File Uploadtitle>
04.<script type="text/javascript">05. 06.function show()07.{08.var n = document.myform.jumfile.value;09.var i;10.var string = "";11. 12.for (i=0; i<=n-1; i++)13.{14.string = string + "Pilih File: <input name=\"userfile"+ i + "\" type=\"file\"><br>";15.}16. 17.document.getElementById('selectfile').innerHTML = string;18.document.myform.n.value = n;19.}20.script>21.head>22.<body>23.<form name="myform" enctype="multipart/form-data" action="upload.php" method="POST">24. 25.Pilih Jumlah File26. 27.<select name="jumfile" onchange="show()">28.<option value="1">1option>29.<option value="2">2option>30.<option value="3">3option>31.<option value="4">4option>32.<option value="5">5option>33.<option value="6">6option>34.select>35. 36.<br><br>37.<input type="hidden" name="MAX_FILE_SIZE" value="20000000" />38. 39.<div id="selectfile">40.div>41. 42.<br>43.<input type="hidden" name="n" />44.<input type="submit" name="submit" value="Upload" />45.form>46.body>47.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
1.<input name="userfile0" type="file">
2.<input name="userfile1" type="file">
3.<input name="userfile2" type="file">
4..
5..
6.dst
Untuk membuat sejumlah n buah komponen upload file tersebut, maka digunakan looping
1.for (i=0; i<=n-1; i++)
2.{
3.string = string + "Pilih File: + i + "\" type=\"file\">
";
4.}
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
01.02. 03.// membaca nilai n dari form upload04.$n = $_POST['n']; 05. 06.// setting nama folder tempat upload07.$uploaddir = 'data/';08. 09.// proses upload yang diletakkan dalam looping10.for ($i=0; $i<=$n-1; $i++)11.{12.// membaca nama file yang diupload di setiap komponen upload13.$fileName = $_FILES['userfile'.$i]['name']; 14. 15.// membaca ukuran file yang diupload di setiap komponen upload16.$fileSize = $_FILES['userfile'.$i]['size'];17. 18.// nama file temporary yang akan disimpan di server19.$tmpName = $_FILES['userfile'.$i]['tmp_name']; 20. 21.// menggabungkan nama folder dan nama file yang diupload22.$uploadfile = $uploaddir . $fileName;23. 24.// proses upload file ke folder 'data'25.if ($fileSize > 0)26.{27.if (move_uploaded_file($tmpName, $uploadfile))28.{29.echo "File ".$fileName." telah diupload
";30.}31.else32.{33.echo "File ".$fileName." gagal diupload
";34.}35.}36.}37. 38.?>
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)
Nah… untuk mengantisipasi bahwa proses upload hanya terjadi jika
komponen uploadnya telah terisi filenya, maka digunakanlah statement
berikut ini dalam script di atas.
1.if ($fileSize > 0)
2.{
3.....
4.}
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 ]
EmoticonEmoticon