script multiple file upload dengan php

Upload: nanangswidodo

Post on 17-Oct-2015

543 views

Category:

Documents


1 download

DESCRIPTION

script multiple file upload dengan php

TRANSCRIPT

  • Rosihan Ari's BlogKetika berbagi ilmu menjadi investasi dunia dan akhirat

    HOME |ABOUT ME |NO REKENING |NO RESI PENGIRIMAN BARANG

    Free Ebook Tutorial from Rosihan Ari's BlogTutorial Javascript | Tutorial PHP | Tutorial AJAX | Tutorial CSS | Tutorial FPDF | Tutorial Wordpress |

    Tutorial Java SE

    Script Multiple File Upload Dengan PHPJune 26th, 2009 | by rosihanari | Cetak Artikel

    Beberapa waktu lalu, saya pernah menulis artikel mengenai cara membuat script uploadfile ke folder yang berada di server. Akan tetapi, script upload file yang dibahas di situhanya bisa mengupload sebuah file dalam sekali upload. Sehingga bila kita inginmengupload 5 buah file, maka kita harus lakukan langkah yang sama berulang-ulangsebanyak 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 possibleHal itulah yang akan dibahas dalam artikel kali ini.

    Print

  • Konsep utama dalam membuat script multiple file upload ini adalah, kita harus mengupayakan membuat formyang di dalamnya terdapat komponen upload file yang dinamis. Maksud dinamis ini adalah secara otomatisdalam 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 dalamartikel 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 sayakasih batasan jumlah file yang bisa diupload adalah 6 buah supaya scrollingnya tidak terlalu panjang. But Andabisa menambahkan sendiri maksimum jumlah filenya.Setelah user memilih jumlah file yang akan diupload melalui combo box, selanjutnya secara langsung akanmuncul komponen upload file sejumlah pilihannya tadi tanpa mensubmit. Untuk memunculkan secara langsungkomponen 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.

    Multiple File Upload

    Pilih Jumlah File

    1

  • Perhatikan kode HTML di atas!Nama komponen untuk memilih banyaknya file yang akan diupload adalah jumfile. Maksimum ukuran file yangboleh diupload adalah 2MB (perhatikan komponen dengan nama MAX_FILE_SIZE). Selanjutnya terdapatpula tag

    Wah buat apa ya tag itu? Tag itu nantinya akan digunakan sebagai bagian untuk menampilkan komponen uploadfilenya 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 inidigunakan untuk menyimpan informasi tentang jumlah file yang akan diupload. Dalam hal ini nilainya sejumlahpilihan 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 dasarnyaproses upload multiple file ini adalah proses upload file yang diulang-ulang sebanyak jumlah filenya. Simpel bukanidenya?OK.. next.. bagaimana cara membuat komponen upload yang dinamisnya? Sesuai skenario di atas yaitu sejumlahkomponen upload akan muncul setelah user memilih jumlah file yang akan diupload, maka kita berikan eventonchange pada combo boxnya.formupload.html

    10.11.12.13.14.15.16.17.18.19.20.21.22.23.24.25.26.27.28.

    23456

    1.2.

    01.02.03.04.

    Multiple File Upload

  • 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. Trusbagaimana bentuk function show() Javascriptnya? Ini diaformupload.html

    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

    123456

    01.02.03.04.05.06.07.08.09.10.11.12.13.14.15.16.17.18.19.20.21.

    Multiple File Upload

    function show()

    {var n = document.myform.jumfile.value;var i;var string = "";for (i=0; i

  • Wah bagaimana tuh ide dalam Javascriptnya, kok bisa seperti itu? Konsepnya adalah membuat looping untukmembuat komponen sejumlah n buah. Nilai n ini adalah sama dengan nilaijumlah 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 namakomponen tidak boleh sama, misalnya

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

    Selanjutnya komponen-komponen tersebut digabung menjadi satu ke dalam sebuah string, dan akhirnya stringtersebut ditampilkan ke dalam bagian dengan cara memberikan perintah:

    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.

    Pilih Jumlah File

    123456

    1.2.3.4.5.6.

    ..dst

    1.2.3.4.

    for (i=0; i

  • Sedangkan perintah

    digunakan untuk memberikan nilai pada komponen dengan nilai yang samadengan n (berasal dari combobox)OK.. paham ya konsep Javascript untuk membuat form upload dinamis. Sekarang kita fokus ke script PHPuntuk proses uploadnya. Pada prinsipnya sama seperti upload single file, namun dalam script ini kita buat loopingdalam proses uploadnya.upload.php

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

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

    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.

  • Ada hal yang perlu kita perhatikan terkait dengan script di atas. Misalkan kita memilih jumlah file yang akandiupload sejumlah 4 buah. Setelah kita memilih 4 pada combo boxnya, maka akan muncul 4 buah komponenuntuk 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.

    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 TerkaitIde Pembuatan Script PHP Upload Download File Via FolderIde Membuat Script Upload Download File Dengan Batasan Hak AksesEdit File CSS Berbasis File Teks dengan PHPMembuat Script Random Image dengan PHPMembuat Script PHP untuk Kompresi File ZIP

    38. ?>

    1.2.3.4.

    if ($fileSize > 0){

    ....}

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

    Ada 73 komentar dalam artikel ini. Older Comments

    1. fadixz says:December 17, 2012 at 8:28 amcara menampilkannya bagaimana mas????

    2. Mike says:January 10, 2013 at 10:28 amTerima Kasih Banyak Tutorial nyaSangat bermanfaatIts Work

    3. whahyou says:January 23, 2013 at 1:07 ampak, mau tnya misal qt ni kn panggil bnyak data dari satu tabel,.. trz mau qt masukin data tersebut dengannilai. (contoh 10 data tampil, dan data yg diisi kn pada data tersebut adalah masing2 5 data untuk tiapdata yg tampil.) mohon bantuannya

    4. nara says:February 25, 2013 at 3:30 ampak terimaksih sekali atas postingannya yang sangat membantu, saya ingin bertanya bagaimana script PHPutk menampilkan hasil data yang sudah diupload?

    5. haohao says:April 12, 2013 at 9:38 amkeren sekali pak thank you a lot

  • 6. Iyunk says:December 25, 2013 at 7:12 ampak 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 artikeluntuk keperluan komersial tanpa seijin pemilik blog.

    Copyright 2010 - Rosihan Ari, All Rights Reserved.

    GampSMS NewsPlugin Integrasi Ke SIADPA Untuk Layanan SMS INFO PERKARAJual Modem Wavecom SMS CenterGampSMS Plugin SMS2WEB Telah DirilisGAMPSMS API Pro Telah DilaunchingSMS Broadcast Masking Sender IDSMS Broadcast Targeted (SMS Profiling)SMS Broadcast LBA (Location Based Advertising)

  • Cara Men-Disabled Cache Pada Browser ChromePremium Plugin E-Commerce Site Auto Confirm SMSPremium Plugin SMS Iklan Baris

    Produk KamiDownload Tutorial JAVA SE GratisEbook Panduan Praktis OOP di PHPEbook Panduan Praktis SMS Gateway dengan PHP dan GammuEbook Kalkulus dengan MapleJual Modem Wavecom Fastrack Untuk SMS GatewayJual Software SMS Gateway dan SMS Center GampSMSPasang Iklan BannerToko Ebook Tutorial RosihanAri.Net

    Random Artikel

  • Teknik Membuat Script Mengubah Ukuran Image dengan JavascriptMembuat Kalkulator Berbasis String dengan PHPKenapa Pengubahan Konfigurasi File php.ini Tidak Ada Efeknya?Ide Dibalik Pembuatan Script Membilang BilanganMembuat Checkbox Dinamis dan Pemrosesannya

    Resi Pengiriman BarangNo. Resi: 2446296690XXXNama: IrwansyahTujuan: BogorVia: TIKI JNETgl Kirim: 22-03-2014Barang:Modem WavecomNo. Resi: 2446296680XXXNama: Heru setiawanTujuan: Jakarta timurVia: TIKI JNETgl Kirim: 22-03-2014Barang: gampSMSNo. Resi: 2226296700XXXNama: iis surahmanTujuan: ciamisVia: TIKI JNETgl Kirim: 22-03-2014Barang: gampSMSNo. Resi: 2446296720XXXNama: yondie lonoTujuan: barito utaraVia: TIKI JNETgl Kirim: 22-03-2014Barang:Modem WavecomNo. Resi: 2446296740XXXNama: kurnia setiawanTujuan: salatigaVia: TIKI JNETgl Kirim: 14-03-2014Barang:Modem WavecomSelengkapnya >>

    Kategori ArtikelBisnis 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 TutorialDownload Tutorial CSS GratisDownload Tutorial FPDF (Membuat PDF dengan PHP)Download Tutorial JAVA SE GratisDownload Tutorial Javascript GratisDownload Tutorial PHP Dasar GratisDownload Tutorial WordPress GratisEbook Panduan Praktis SMS Gateway dengan PHP dan GammuPasang Iklan BannerToko Ebook Tutorial RosihanAri.Net

    Artikel TerbaruCara Mudah Mempercantik Tooltips dengan Bootstrap dan JQueryMempercantik Navigasi Paging dengan Twitter BootstrapManajemen User dan Hak Akses Database di MySQLManfaat Function urlencode() di PHPTentang Primary Key, Unique dan Index di MySQLIntegrasi Form Registrasi dengan Pengiriman Email Berisi Attachment Bukti RegistrasiCara Mudah Menampilkan Video di Web dengan HTML5Membuat Filter Extension File Pada Form UploadScript 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 Terakhirrosihanari on Cara Mudah Mempercantik Tooltips dengan Bootstrap dan JQueryrosihanari on Ebook Panduan Praktis OOP di PHPluthfi onMempercantik Navigasi Paging dengan Twitter BootstrapOgi on Ebook Panduan Praktis OOP di PHPRodhiyah Desviana on Ebook Panduan Praktis OOP di PHPyudi on Cara Mudah Mempercantik Tooltips dengan Bootstrap dan JQueryrosihanari on Ebook Panduan Praktis OOP di PHPAplikasi Android on Download Tutorial CSS GratisRodhiyah Desviana on Ebook Panduan Praktis OOP di PHProsihanari on Cara Membuat Foreign Key, Relasi Tabel dan Referential Integrity di phpMyAdmin

    Statistik Web

  • Rosihan Ari's Blog is proudly powered byWordPress