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]}");
    }
  }
?>

Comments

12 responses to “Multiple File Upload dengan PHP dan HTML5”

  1. annonymous Avatar
    annonymous

    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

    1. Budi Avatar

      Gunakan ajax, tapi itu tugas yang cukup rumit.

      1. annonymouse Avatar
        annonymouse

        bukan sisi client yang saya tanyakan, tapi metode diphp (server) yang dipakai untuk mendeteksi berapa persen data yang sudah masuk, untuk filenya sendiri rencananya akan saya simpan didatabase

        1. Sibudi Avatar

          wah saya belum pernah lihat yang seperti itu. bisa dengan cara dibandingkan ukuran file asli dengan ukuran file yang sudah diterima server.

  2. Sriyono Semarang Avatar

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

  3. shiffubyWhees Avatar
    shiffubyWhees

    belajar banyak dari sini 🙂

  4. ambikuk Avatar

    artikel bagus nih. update terus mas

  5. hoebbiet Avatar

    blog walking.. ketemu blog apik… lanjutkan!!

  6. Lirik Yes Avatar

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

  7. ruduy Avatar

    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. riki roder Avatar

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

  9. vikram Avatar
    vikram

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

Leave a Reply

Your email address will not be published. Required fields are marked *