Multiple Files Upload pake PHP dan Javascript

Share:

Hello World's! Dalam suatu kasus, sebuah objek dom memerlukan beberapa biji. Tapi, sebelum masuk ke inti, apa sih dom itu? Sering denger kata dom, tapi nggak tau maksud dom yang sebenarnya.
Bagi yang udah tau, DOM (singkatannya Document Object Model) adalah suatu objek yang ada di dokumen HTML. Objek ini gimana sih maksudnya? Objek itu nama lainnya dari elemen. Jadi, dom itu ya input, form, button, div, dan sebagainya.

Seperti yang saya katakan di awal, terkadang objek-objek tertentu itu dibutuhkan lebih dari satu, dan biasanya jumlahnya itu suka-suka si user. Mau berapapun ya terserah mereka. Untuk menangani kasus yang kayak gini, biasanya disediakan sebuah tombol yang fungsinya untuk menambah objek-objek yang diinginkan.

Contoh kasus kayak gini seringkali kita jumpai di bagian upload file. Biasanya, di halaman upload file itu ada satu input file. Nah, biar si user ini nggak direpotkan upload file satu-satu, di sekitar input tersebut dikasi sebuah tombol yang gunanya buat nambah input file tadi.

Sekarang kita akan belajar bikin kayak gitu, bikin tombol yang kalau di klik bisa nambah elemen html. Biar saya gak repot cari contoh lain, kita akan membuat form multiple upload, tapi bagian depannya saja. Nanti bagian belakangnya akan saya bahas di postingan berikutnya.

Pertama, kita buat halaman html secara basic-nya saja yang terdiri dari DTD, tag html, head lengkap dengan title dan segala meta-nya, juga tag body yang nanti kita isi form. Saya rasa, gak perlu saya tulis disini, selain ini gampang, di artikel sebelum-sebelumnya juga ada.

Kedua, kita buat form-nya di bagian body, script-nya kayak gini.

<form action="upload.php" method="post">
     <input type="file" name="berkas[]"><br />
     <button>Upload</button>
</form>

Sedikit penjelasan. Untuk aksi form-nya terserah mau diarahkan kemana, yang penting ada file-nya. Atau tunggu post berikutnya kita bikin pemroses php untuk form ini. Yang jelas method-nya post ya. Nah, kenapa kok ada "[]" di name input file? Itu fungsinya akan menyimpan value berupa array. Kemudian, tambahkan atribut ini di dalam tag form.

enctype="multipart/form-data"

Atribut diatas fungsinya... Apa ya...? Pokoknya kalau mau transfer file, form ada input file, harus ada itunya. Kalau gak ada, value input file bakal cuma dideteksi sebagai string aja, bukan file.

Sesuai judul, form inikan dibikin biar bisa multiple. Ya jelas nggak mungkin cuma satu dong inputnya. Kalau satu namanya single upload, bukan multiple. Jadi, gimana caranya si user harus bisa nginput file sebanyak yang mereka mau. Caranya yaitu dikasi tombol yang kalau diklik input-nya nambah satu.

Tambahkan button berikut ini di sebelah tombol upload pada form di atas.

<button type="button" onclick="more()">More</button>

Terus, tambahin script ini di bawah input file, di bawahnya br, biar nanti munculnya kebawah, gak samping, kayak hilo.

<div id="moreInput"></div>

Kemudian, kita bikin fungsi-nya biar kalo tombol More diklik bisa nambah satu input file. Letakkan javascript ini... terserah dimana aja bisa. Saya coba naruh di bagian akhir body, tepat diatas tag penutupnya.

<script>
     function tambahElemen(parentId, elementTag, elementId, html) {
          var p = document.getElementById(parentId);
          var newElement = document.createElement(elementTag);
          newElement.setAttribute('id', elementId);
          newElement.innerHTML = html;
          p.appendChild(newElement);
     }
     function more() {
          var html = '<input type="file" name="berkas[]">';
          tambahElement("moreInput", "div", "filenya", html);
     }
</script>

Tampilan antarmuka udah jadi. Sekarang kita beralih ke bagian belakang. Yaitu di file upload.php-nya, file buat memproses data. Langsung aja, kita buat file upload.php-nya dengan memasukkan script ini di dalamnya.

<?php

// Tentuin dimana tempat file-nya akan diunggah
$direktori = "unggah/";

$berkas = $_FILES["berkas"]["name"];
$tmp = $_FILES["berkas"]["tmp_name"];

for ($i = 0; $i < count($berkas); $i++ {
     move_uploaded_file($tmp[$i], $direktori.$berkas[$i]);
     header("location: $direktori");
}

?>

Seeep. Form upload dengan multi-berkas sekarang udah jadi. Tinggal kita coba aja buat ngupload file. App ini juga bisa kita jadikan sebagai alternatif kirim file kalau kabel USB gak kebaca di PC. Tinggal kita jadiin satu jaringan antara hp sama pc, terus disetel ip-nya. Salam Koding!

No comments