Mau kaos (T-shirt) Wordpress keren? (Script Multiple File Upload Dengan PHP
June 26th, 2009 | by rosihanari |
Cetak Artikel Ini
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
<html>
<head><title>Multiple File Upload</title></head>
<body>
<form name="myform" enctype="multipart/form-data" action="upload.php" method="POST">
Pilih Jumlah File
<select name="jumfile">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</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
<div id="selectfile"> </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 <div>..</div> nantinya akan digunakan Javascript DOM.
Berikutnya ada pula komponen <input type=”hidden” name=”n” />. 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 Upload</title></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">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</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 Upload</title>
<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">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</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 <input name=”userfile” type=”file”> 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: <input name=\"userfile"+ i + "\" type=\"file\"><br>"; }
Selanjutnya komponen-komponen tersebut digabung menjadi satu ke dalam sebuah string, dan akhirnya string tersebut ditampilkan ke dalam bagian <div id=”selectfile”></div> dengan cara memberikan perintah:
document.getElementById('selectfile').innerHTML = string;
Sedangkan perintah
document.myform.n.value = n;
digunakan untuk memberikan nilai pada komponen <input type=”hidden” name=”n” /> 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
<?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<br>"; } else { echo "File ".$fileName." gagal diupload<br>"; } } } ?>
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.
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 ]
Beberapa artikel terkait
- Ide Pembuatan Script PHP Upload Download File Via Folder
- Ide Membuat Script Upload Download File Dengan Batasan Hak Akses
- Cara Memfilter Extension File Upload dengan PHP
- Script Proses Edit File Yang Telah Diupload Ke Database MySQL
- Script Cari Data File Yang Terupload Ke MySQL
- Edit File CSS Berbasis File Teks dengan PHP
- Script Upload Video dan Video Player di Web dengan PHP dan MySQL
- Membuat Script Random Image dengan PHP
- Membuat Script PHP untuk Kompresi File ZIP
- Membuat Thumbnail Image dengan Script PHP
Share this article on:
Kata kunci: DOM - Javascript - PHP - script - upload -
Rosihan Ari adalah seorang programmer, penulis buku, trainer, peneliti dan berusaha menjadi seorang blogger sejati dengan memberikan yang terbaik buat negeri ini. Berfokus pada computer programming serta computer aided learning for mathematics, ia ingin berbagi ilmu yang dimilikinya. 
Loading ...
Artikel yang bagus
waaa…Alhamdulillah… tengkyu berat atas tutorialnya P Ari..Makin cinte deh sama blog ini.
BTw, ada bbrp yg sy blm paham.
- Bgmn ‘mcatat’ nama file terupload kedlm database mwsqlnya? Jd mslnya, kita bkn data surat masuk bserta lampiran2nya, user nantinya bs mliht data surat masuk n bs mdownload lampiran terkait.
- Bgmn ya ide script tuk downloadnya?
- Bgmn antisipasi, kl yg dipilih 2 file tuk upload, trnyata mau yg harus diupload ada 4?
Mohon pencerahannya…
Jazakalloh
to sahl: kan sudah pernah saya bahas di artikel http://blog.rosihanari.net/ide-membuat-script-upload-download-file-dengan-batasan-hak-akses/ untuk membuat script upload dan download file ke db mysql.
Oh iya, bisa pake itu ya pa..
Btw, artikel2 bapa yang lama ko banyak yg ga bisa diakse lg yah? spt link yg bp ksih, keluar error spt ini:
“Tidak ditemukan
Maaf, artikel yang Anda inginkan tidak tersedia atau dihapus.”
salam
to sahl: maaf sebelumnya saya main2 dengan permalink, malah jadi error. Skrg dah tak kembalikan semula
mantap pak. tapi saya lebih prefer dengan sebuah tombol minus untuk menghapus, dan tombol tambah untuk menambah text-box lainnya. hehehe… karena dengan model seperti ini, semuanya akan di reset setiap kita memilih berapa banyak text box yang akan di tampilkan. CMIIW.
.-= ganda´s last blog ..Wordpress Tip : Change Wordpress Administrator Username Without Using Plugin =-.
to ganda: ya itu juga bisa mas…
salam kenal pak ari, saya dari mojokerto (saya manggil pak ari krn ngikut komentator sebelumnya). blog-nya sip banget. ditunggu terus karyanya nih . . .
Halo pak rosi salam kenal nih, langsung aja mau tanya untuk script ini ada action progresnya ndak nih. tolong di jawab/balas emailku pak makasih
to sugex: aduh… tuh istilah ‘action progress’ maksudnya apa yah?