More Than One File Upload in Form
Nurul Huda
PHP: Upload Multiple Files
- PHP
- Web Dinamis
Daftar Isi
Pada pertemuan sebelumnya, kita telah mempelajari cara upload file dengan php.
Kalau kita buka-buka lagi projek yang sebelumnya, kita pada akhirnya memang membuat form yang mengupload dua buah gambar, yaitu gambar untuk foto dan gambar untuk ktp.
Terus? Bukannya itu lebih dari satu file? Berarti multiple files dong?
Enggak juga. Itu tetep single file. Alias satu <input type="file"> hanya untuk satu file. Sedangkan upload multiple files itu, satu input-an bisa untuk lebih dari satu file, dengan cara:
- Menambahkan atribut
multiplepada tag<input>dan dengan - Dan mengubah
namemenjadi assortment, seperti ini:
< input type = "file" name = "listGambar[]" accept = "image/*" multiple > Pada kode html di atas, tag input memiliki:
- Proper noun
listGambar[]yang berupa array (karena ada tanda kurung siku[]) - Atribut
multiple, yang memungkinkan user untuk memilih lebih dari satu file secara sekaligus.
Persiapan File
Langsung saja. Kita buat project-nya.
Kemudian buat dua file dengan struktur berikut:
upload-file/ ├── form.html └── proses.php File form.html sebagai form-nya, dan file proses.php untuk menangani proses upload-nya.
Oiya, jangan lupa bikin ☕ dulu, ya! 😁
Membuat Form HTML
Selanjutnya kita buka file course.html, lalu tulis kode plan seperti berikut:
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-viii" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < title >Upload Multiple Files PHP | Jago Ngoding</ championship > </ head > < body > < h1 >Upload Multiple Files PHP | Jago Ngoding</ h1 > < class action = "proses.php" method = "Postal service" enctype = "multipart/form-data" > < div > < label >Pilih gambar</ label > < br > < input blazon = "file" proper noun = "listGambar[]" accept = "prototype/*" multiple > </ div > < button style = "margin-top: 2rem" >Upload</ button > </ form > </ trunk > </ html > Hal yang paling penting adalah:
- Nama dari input file harus berupa assortment (yaitu dengan menambahkan kurung siku
[]) - Lalu menambahkan atribut
multiplepada input file agar ia bisa menerima lebih dari satu file secara sekaligus. - Sisanya kurang lebih sama seperti pertemuan sebelumnya tentang upload single file.
Bentuk Data yang Dikirim Untuk Multiple Files
Seperti biasa, sebelum kita mulai proses upload file.
Kita akan terlebih dahulu membedah isi dari variabel super global $_FILES untuk kasus upload multiple files.
Pada file proses.php, tuliskan kode program berikut:
<? php $files = $_FILES ; echo "<pre>" ; print_r ( $files ); repeat "</pre>" ; Nantinya kode programme di atas akan kita hapus.
one. Pilih Files
Langsung kita exam drive.
-
Klik tombol Choose Files (jika bahasa inggris)
-
Lalu pilih lebih dari satu gambar dengan menekan tombol
CtrlatauShiftPada contoh ini saya memilih 2 buah file:
-
Setelah itu, akan ada informasi untuk berapa jumlah file yang telah kita pilih.
two. Submit
Langsung saja klik tombol Upload.
Kita akan mendapatkan hasil (kira-kira) seperti berikut:
Penjelasan
- Pada variabel
$_FILES, terdapat indeks dengan namalistGambardengan tipe information array asosiatif. -
$_FILES['listGambar']bertipe data array (asosiatif) dengan atribut:-
name- berisi informasi nama file -
blazon- berisi informasi tipe file -
tmp_name- berisi informasi lokasitmpfile pada server -
mistake- berisi informasi tentang fault upload -
size- berisi informasi tentang ukuran file
-
- Setiap atribut dari
$_FILES['listGambar']adalah array terindeks. Indeks 0 (pertama) untuk file pertama, dan indeks 1 (kedua) untuk file kedua.
Bikin Direktori assets/uploads
Okay, karena kita telah mengetahui bagaimana wujud struktur datanya, sekarang kita bisa hapus kode plan pada file proses.php, lalu menggantinya dengan kode program di bawah:
<? php $folderUpload = "./assets/uploads" ; # periksa apakah binder tersedia if ( ! is_dir ( $folderUpload )) { # jika tidak maka binder harus dibuat terlebih dahulu mkdir ( $folderUpload , 0777 , $rekursif = true ); } Penjelasan
Kode plan di atas fungsinya sama saja seperti pada pertemuan sebelumnya, yaitu:
- Untuk memeriksa apakah di dalam direktori projek kita, terdapat direktori
assets/uploadsatau tidak. - Jika tidak, maka kita akan membuat direktori tersebut dengan fungsi
mkdir.
Tampilkan Nama File Yang Sudah Dipilih
Setelah itu, kita akan mulai mengupload (atau memindahkan file yang sudah terupload) ke dalam direktori assets/uploads.
Akan tetapi, pertama-tama kita harus tau terlebih dahulu:
- berapa jumlah file yang terupload?
- apa nama file yang terupload?
- apa lokasi sementara (
tmp) dari file tersebut?
<? php ... $files = $_FILES ; $jumlahFile = count ( $files [ 'listGambar' ][ 'name' ]); for ( $i = 0 ; $i < $jumlahFile ; $i ++ ) { $namaFile = $files [ 'listGambar' ][ 'proper noun' ][ $i ]; $lokasiTmp = $files [ 'listGambar' ][ 'tmp_name' ][ $i ]; echo "nama: $namaFile , tmp: { $lokasiTmp } <br>" ; } Penjelasan
Nah, pada kode program di atas, kita telah:
- Mengambil jumlah file dengan menghitung length dari array
$files['listGambar']['proper name']. Kita bisa mengganti atributproper namedengan yang lain sepertitype, atautmp_namedan hasilnya akan sama saja. - Melakukan perulangan dengan for sebanyak
$jumlahFile. - Mengambil nama file dan juga lokasi tmp sesuai dengan indeks perulangan (
$i).
Refresh dan kirim ulang file yang telah kita upload, maka kita akan mendapatkan output kira-kira seperti berikut:
Upload File
Karena kita sudah berhasil mendapatkan nama dan juga lokasi tmp, maka yang harus kita lakukan selanjutnya adalah memindah gambar tersebut dari lokasi tmp, ke lokasi baru.
Perhatikan kode programme berikut:
<? php ... for ( $i = 0 ; $i < $jumlahFile ; $i ++ ) { $namaFile = $files [ 'listGambar' ][ 'name' ][ $i ]; $lokasiTmp = $files [ 'listGambar' ][ 'tmp_name' ][ $i ]; # kita tambahkan uniqid() agar nama gambar bersifat unik $namaBaru = uniqid () . '-' . $namaFile ; $lokasiBaru = " { $folderUpload } / { $namaBaru } " ; $prosesUpload = move_uploaded_file ( $lokasiTmp , $lokasiBaru ); # jika proses berhasil if ( $prosesUpload ) { echo "Upload file <a href=' { $lokasiBaru } ' target='_blank'> { $namaBaru } </a> berhasil. <br>" ; } else { echo "<bridge style='colour: ruby-red'>Upload file { $namaFile } gagal</span> <br>" ; } } Coba jalankan kembali program, lalu upload beberapa file.
Jika tidak ada mistake apa pun, harusnya kita akan mendapatkan output kira-kira seperti berikut:
Kesimpulan
Bagaimana? Mudah sekali bukan? Perbedaan inti dari cara upload unmarried file dengan upload multiple files hanya lah dari sisi sturktur information yang dikirim, dan juga dari atribut serta nama dari input file HTML yang kita buat.
Ada pun sisanya, maka secara umum sama saja.
Kode Plan Lengkap
Untuk kode program lengkap, kalian bisa dapatkan di repository PHP Web Dinamis pada akun github jagongoding.
Jangan lupa kasih star ya!⭐🌟
Mengamankan Proses Upload File
Ini adalah contoh upload multiple file yang sangat sederhana. Tanpa validasi, tanpa simpan ke database. Tujuan intinya adalah agar kita paham bagaimana cara kerjanya dari yang paling dasar. Dan agar kita bisa memodifikasinya sendiri sesuai kebutuhan.
Ada pun pada pertemuan selanjutnya, insyaallah kita akan membahas tentang validasi dan cara mengamankan proses upload file pada PHP!
Stay tune!
Jangan lupa share ke teman-teman kalian, ya! Terima kasih banyak.
Pemrograman PHP: Pemula Sampai Mahir.
Belajar pemrograman PHP dari pemula sampai mahir disertai studi kasus. Materi akan selalu di-update secara berkala.
Source: https://jagongoding.com/web/php/web-dinamis/upload-multiple-files/
0 Response to "More Than One File Upload in Form"
Post a Comment