Multiple File Upload dengan PHP dan HTML5

Multiple upload HTML5
Jika kita ingin melakukan upload lebih dari satu file, biasanya akan menggunakan kode HTML sebagai berikut:

<form action="" method="post" enctype="multipart/form-data">
  <input type="file" name="berkas&#91;&#93;" />
  <input type="file" name="berkas&#91;&#93;" />
  <input type="submit" value="Upload" />
</form>

Kelemahannya adalah kita harus menekan tombol browse sebanyak jumlah file yang ingin di-upload. Selain itu membutuhkan bantuan Javascript jika diinginkan fasilitas untuk penambahan field upload.

Melanjutkan catatan file upload yang lalu, kali ini adalah tentang mengunggah (upload) banyak berkas (file) dengan PHP dan HTML5. Ternyata HTML5 sudah mampu mengunggah banyak file sekaligus tanpa bantuan Javascript, hanya dengan sebuah form <input type=’file’>. Namun ada 2 hal yang membedakan dengan file upload biasa, pertama pada attribute name, yaitu di belakangnya ditambahkan tanda kurung kotak “[ ]” yang akan menyebabkan PHP memperlakukannya sebagai sebuah array. Perbedaan yang kedua yaitu adanya attribute multiple, yang baru diperkenalkan pada HTML5.

<form action="" method="post" enctype="multipart/form-data">
  <input type="file" name="berkas2&#91;&#93;" />
  <input type="submit" value="Upload" />
</form>

Jika kita coba tampilkan di layar menggunakan perintah print_r($_FILES) (baca catatan file upload yang lalu) maka hasilnya adalah kurang lebih sebagai berikut:

Array
(
    [berkas2] => Array
        (
            [name] => Array
                (
                    [0] => 125586922.jpg
                    [1] => afpheh5e.jpg
                    [2] => baby nirvana.jpg
                )

            [type] => Array
                (
                    [0] => image/jpeg
                    [1] => image/jpeg
                    [2] => image/jpeg
                )

            [tmp_name] => Array
                (
                    [0] => /tmp/phpuBSQsq
                    [1] => /tmp/phpOJajKX
                    [2] => /tmp/phpW93N1u
                )

            [error] => Array
                (
                    [0] => 0
                    [1] => 0
                    [2] => 0
                )

            [size] => Array
                (
                    [0] => 91835
                    [1] => 41895
                    [2] => 36404
                )

        )

)

Sekarang kita punya array multidimensi yang bentuknya sedikit aneh karena alih-alih dikelompokkan berdasarkan indeks 0, 1, 2, dst melainkan indeks name, type, tmp_name, dst. Menggunakan operator foreach kita bisa membagi file menurut indeks numeriknya tanpa harus melakukan transformasi array yang rumit.

foreach($_FILES['berkas2']['tmp_name'] as $key => $tmp_name) {
  move_uploaded_file($tmp_name, "uploads/{$_FILES['berkas2']['name'][$key]}");
}

Kini mengunggah banyak file sekaligus jadi lebih mudah, tekan tombol ctrl pada keyboard atau cukup drag mouse untuk memilih file-file yang ingin di-upload. Berikut ini adalah kode sumber lengkapnya:

<!DOCTYPE html>
<html>
  <head>
    <title>upload 1 file</title>
    <meta charset="utf-8">
  </head>
  <body>
    <div>
      <form action="" method="post" enctype="multipart/form-data">
        <p>
          <input type="file" name="berkas2&#91;&#93;" multiple="multiple" />
          <input type="submit" value="Upload" />
        </p>
      </form>
    </div>
  </body>
</html>
 
<pre>
<?php
  if(isset($_FILES&#91;'berkas2'&#93;)) {
    foreach($_FILES&#91;'berkas2'&#93;&#91;'tmp_name'&#93; as $key => $tmp_name) {
      move_uploaded_file($tmp_name, "uploads/{$_FILES['berkas2']['name'][$key]}");
    }
  }
?>

About Sibudi

Ubuntu user | Loves books | Blogger | Web Developer | Learn PHP, JavaScript, Ruby & Python the hard way

28. October 2011 by Sibudi
Categories: HTML5 | Tags: , , | 13 comments

Comments (13)

  1. master gimana caranya bikin file uploader yang bisa nampilin progress bar, tapi filenya diuploadnya ke database, nah pas insert databasenya gimana metode yang digunakan untuk mendeteksi berapa persen data yang sudah masuk ke database

  2. menyimak saja, agak puyeng beginian, sementara posting postng sederhana sajalah 🙂

  3. belajar banyak dari sini 🙂

  4. artikel bagus nih. update terus mas

  5. blog walking.. ketemu blog apik… lanjutkan!!

  6. mantap gan artikelnya, izin berguru gan yach mau sedot ilmu.he.hehe

  7. pak , bagaimana cara menampilkan gambar yang tadi kita upload , misalkan upload 12 gambar , lalu cara menampilkannya bagaimana ? kalau gambarnya masuk ke folder dan database (hanya nama or alamat saja) itu bagaimana scriptnya dan cara menampilkannya ?

  8. Trimakasih buat infonya , titip link dan berkunjung yah ke web saya http://www.penjualanrumah.com trims

  9. Makasih mas … Skripnya hebat ngk banyak bertele-tele kaya blog lain … SUkses Blognya ^_^

  10. In the various types associated with games mentioned previously,
    typically the joker slot online game has become the particular most popular game.
    Not really only since the sport is interesting in addition to
    can make the lot of profit through jackpots which have
    amazing value, but Joker123 Slots also provides hundreds of
    types regarding slot games that will you can pick
    to ensure that online gambling members will never ever feel bored.

    Within Indonesia, Sbomabos will be the official broker of the Joker123
    site which acts as a liaison portal in between you
    as a player and almost all the games supplied by the most recent
    Joker123 site. Since a joker123 real estate agent, the Sbomabos site will provide a user ID that you can later use
    in order to access all the particular games available on the Joker123
    internet site.

    The Best Facilities of Sbomabos
    Sbomabos as joker123 slot machine game agent is prepared to provide the greatest facilities that
    adhere to the standards in the official provider joker123 and sbomabos likewise provides promotions to all new members or perhaps loyal members.
    Under is really a directory of typically the best facilities that
    will you will acquire when choosing us all as your gambling agent:

    Friendly in addition to professional service through Sbomabos customer service 24
    hours a new day.
    Safe in addition to convenient financial transaction methods.

    The availability associated with a complete Indonesian local
    bank.
    Member registration is simple and doesn’t take lengthy.

    The process of deposit / disengagement transactions
    takes simply no more than three or more minutes.

    Access to all gambling games together with just one customer ID.

    Attractive additional bonuses and promos you can get every 7 days.

Leave a Reply

Required fields are marked *