Script Multiple File Upload Dengan PHP

Rosihan Ari's Blog
Ketika berbagi ilmu menjadi investasi dunia dan akhirat

HOME | ABOUT ME | NO REKENING | NO RESI PENGIRIMAN BARANG
Free Ebook Tutorial from Rosihan Ari's Blog

Tutorial Javascript | Tutorial PHP | Tutorial AJAX | Tutorial CSS | Tutorial FPDF | Tutorial Wordpress | Tutorial Java SE
Script Multiple File Upload Dengan PHP

June 26th, 2009 | by rosihanari | Cetak Artikel
Print
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. 02. 03. 04. 05. 06. 07. 08. 09. <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>
10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. 24. 25. 26. 27. 28.
<option <option <option <option <option </select>
value="2">2</option> value="3">3</option> value="4">4</option> value="5">5</option> value="6">6</option>
<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. 2. <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 01. 02. 03. 04. <html> <head><title>Multiple File Upload</ title></head> <body> <form name="myform" enctype="multipart/form-data" action="upload.php" method="POST">
05. 06. 07. 08. 09. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. 24. 25. 26. 27. 28.
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 01. 02. 03. 04. 05. 06. 07. 08. 09. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. <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>
22. 23. 24. 25. 26. 27. 28. 29. 30. 31. 32. 33. 34. 35. 36. 37. 38. 39. 40. 41. 42. 43. 44. 45. 46. 47.
<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>
Ebook direkomendasikan untuk Anda Wah bagaimana tuh ide dalam Javascriptnya, kok bisa seperti itu? yang Konsepnya adalah membuat looping untuk membuat komponen <input name=userfile type=file> sejumlah n buah. Nilai n ini adalah sama dengan nilai Ebook Praktis OOP di PHP document.myform.jumfile.value jumlah file yang akan diupload melalui pilihan combo boxnya (n =Panduan ). Namun, untuk setiap komponen tersebut kita harus buat name yang berbeda karena dalam hal ini nama komponen tidak boleh sama, misalnya 1. 2. 3. 4. 5. 6. <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 1. 2. 3. 4. 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:
1.
document.getElementById('selectfile').innerHTML = string;
Sedangkan perintah 1. 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 01. 02. 03. 04. 05. 06. 07. 08. 09. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. 24. 25. 26. 27. 28. 29. 30. 31. 32. 33. 34. 35. 36. 37. <?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>"; } }
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. 2. 3. 4. 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 ]
Baca Juga Artikel Terkait

Ide Pembuatan Script PHP Upload Download File Via Folder Ide Membuat Script Upload Download File Dengan Batasan Hak Akses Edit File CSS Berbasis File T eks dengan PHP Membuat Script Random Image dengan PHP Membuat Script PHP untuk Kompresi File ZIP
Kata kunci: DOM - Javascript - PHP - script - upload -
Ada 73 komentar dalam artikel ini.

Older Comments
1.
fadixz says: December 17, 2012 at 8:28 am cara menampilkannya bagaimana mas????
2.
Mike says: January 10, 2013 at 10:28 am Terima Kasih Banyak Tutorial nya Sangat bermanfaat Its Work
3.
whahyou says: January 23, 2013 at 1:07 am pak, mau tnya misal qt ni kn panggil bnyak data dari satu tabel,.. trz mau qt masukin data tersebut dengan nilai. (contoh 10 data tampil, dan data yg diisi kn pada data tersebut adalah masing2 5 data untuk tiap data yg tampil.) mohon bantuannya
4.
nara says: February 25, 2013 at 3:30 am pak terimaksih sekali atas postingannya yang sangat membantu, saya ingin bertanya bagaimana script PHP utk menampilkan hasil data yang sudah diupload?
5.
haohao says: April 12, 2013 at 9:38 am keren sekali pak thank you a lot
6.
Iyunk says: December 25, 2013 at 7:12 am pak kalau mau di insert ke database juga gimana pak
Older Comments
Mohon maaf, stock modem sedang kosong. Insya Allah, ready lagi tanggal Search Seluruh artikel dalam blog ini dilindungi oleh hak cipta. Dilarang keras untuk memperbanyak sebagian atau seluruh isi artikel untuk keperluan komersial tanpa seijin pemilik blog. Copyright 2010 - Rosihan Ari, All Rights Reserved.
GampSMS News
Plugin Integrasi Ke SIADPA Untuk Layanan SMS INFO PERKARA Jual Modem Wavecom SMS Center GampSMS Plugin SMS2WEB Telah Dirilis GAMPSMS API Pro Telah Dilaunching SMS Broadcast Masking Sender ID SMS Broadcast Targeted (SMS Profiling) SMS Broadcast LBA (Location Based Advertising)
Cara Men-Disabled Cache Pada Browser Chrome Premium Plugin E-Commerce Site Auto Confirm SMS Premium Plugin SMS Iklan Baris
Produk Kami
Download Tutorial JAVA SE Gratis Ebook Panduan Praktis OOP di PHP Ebook Panduan Praktis SMS Gateway dengan PHP dan Gammu Ebook Kalkulus dengan Maple Jual Modem Wavecom Fastrack Untuk SMS Gateway Jual Software SMS Gateway dan SMS Center GampSMS Pasang Iklan Banner Toko Ebook Tutorial RosihanAri.Net
Random Artikel
Teknik Membuat Script Mengubah Ukuran Image dengan Javascript Membuat Kalkulator Berbasis String dengan PHP Kenapa Pengubahan Konfigurasi File php.ini Tidak Ada Efeknya? Ide Dibalik Pembuatan Script Membilang Bilangan Membuat Checkbox Dinamis dan Pemrosesannya
Resi Pengiriman Barang

No. Resi: 2446296690XXX Nama: Irwansyah Tujuan: Bogor Via: TIKI JNE Tgl Kirim: 22-03-2014 Barang: Modem Wavecom No. Resi: 2446296680XXX Nama: Heru setiawan Tujuan: Jakarta timur Via: TIKI JNE Tgl Kirim: 22-03-2014 Barang: gampSMS No. Resi: 2226296700XXX Nama: iis surahman Tujuan: ciamis Via: TIKI JNE Tgl Kirim: 22-03-2014 Barang: gampSMS No. Resi: 2446296720XXX Nama: yondie lono Tujuan: barito utara Via: TIKI JNE Tgl Kirim: 22-03-2014 Barang: Modem Wavecom No. Resi: 2446296740XXX Nama: kurnia setiawan Tujuan: salatiga Via: TIKI JNE Tgl Kirim: 14-03-2014 Barang: Modem Wavecom Selengkapnya >>
Kategori Artikel
Bisnis Online (8) Buat Mahasiswaku (13)
CSS (2) Javascript (12) JQuery (3) Maple (23) Mathematica (13) Matlab (4) My Books (4) Olimpiade Komputer (6) Pernak Pernik (5) PHP (163) Programming (48) SMS Gateway (24) SQL (47) Tentang Matematika (5) Web Technology (1) Wordpress (27)
Free Download Tutorial

Download Tutorial CSS Gratis Download Tutorial FPDF (Membuat PDF dengan PHP) Download Tutorial JAVA SE Gratis Download Tutorial Javascript Gratis Download Tutorial PHP Dasar Gratis Download Tutorial WordPress Gratis Ebook Panduan Praktis SMS Gateway dengan PHP dan Gammu Pasang Iklan Banner Toko Ebook Tutorial RosihanAri.Net
Artikel Terbaru
Cara Mudah Mempercantik Tooltips dengan Bootstrap dan JQuery Mempercantik Navigasi Paging dengan Twitter Bootstrap Manajemen User dan Hak Akses Database di MySQL Manfaat Function urlencode() di PHP Tentang Primary Key, Unique dan Index di MySQL Integrasi Form Registrasi dengan Pengiriman Email Berisi Attachment Bukti Registrasi Cara Mudah Menampilkan Video di Web dengan HTML5 Membuat Filter Extension File Pada Form Upload Script PHP Untuk Mencegah Pengunduhan File Secara Langsung (Direct Download) Mencari Jumlah Selisih Hari Dari Dua Tanggal (Selain Hari Minggu dan Hari Libur)
My New Book
Komentar Terakhir
rosihanari on Cara Mudah Mempercantik Tooltips dengan Bootstrap dan JQuery rosihanari on Ebook Panduan Praktis OOP di PHP luthfi on Mempercantik Navigasi Paging dengan Twitter Bootstrap Ogi on Ebook Panduan Praktis OOP di PHP Rodhiyah Desviana on Ebook Panduan Praktis OOP di PHP yudi on Cara Mudah Mempercantik Tooltips dengan Bootstrap dan JQuery rosihanari on Ebook Panduan Praktis OOP di PHP Aplikasi Android on Download Tutorial CSS Gratis Rodhiyah Desviana on Ebook Panduan Praktis OOP di PHP rosihanari on Cara Membuat Foreign Key, Relasi Tabel dan Referential Integrity di phpMyAdmin
Statistik Web
Rosihan Ari's Blog is proudly powered by WordPress

Script Multiple File Upload Dengan PHP

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Script Multiple File Upload Dengan PHP

Diunggah oleh

Hak Cipta:

Format Tersedia

Rosihan Ari's Blog

Ketika berbagi ilmu menjadi investasi dunia dan akhirat

Free Ebook Tutorial from Rosihan Ari's Blog

Script Multiple File Upload Dengan PHP

<option <option <option <option <option </select>

value="2">2</option> value="3">3</option> value="4">4</option> value="5">5</option> value="6">6</option>

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

Baca Juga Artikel Terkait

Kata kunci: DOM - Javascript - PHP - script - upload -

Ada 73 komentar dalam artikel ini.

Resi Pengiriman Barang

Free Download Tutorial

Rosihan Ari's Blog is proudly powered by WordPress

Anda mungkin juga menyukai