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
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.dstUntuk 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 ]