Tutorial PHP Upload Beberapa File Sekaligus

Pada saat membuat website dinamis sering kali diperlukan fitur untuk upload file atau gambar. Di website ini sudah ada beberapa tutorial untuk upload satu file seperti, Upload Gambar Dengan PHP and Membuat Galery Foto. Sedangkan pada tutorial php ini akan dijelaskan dua cara untuk upload beberapa file sekaligus. Sehingga user tidak perlu upload satu persatu. Tutorial ini juga dilengkapi video tutorial untuk memperjelas lagi. Silahkan kunjungi channel Youtube MyPHPtutorials.

Video tutorial php upload beberapa file sekaligus.

Cara 1 Upload File Menggunakan Attribute Multiple

Buat file php dengan upload1.php dan isi dengan form html seperti di bawah

<!DOCTYPE html>
<html>
    <head>
        <title>Upload Multiple Files</title>
    </head>
    <body>
        <form action="" method="POST" enctype="multipart/form-data">
            File: <input type="file" name="files[]" multiple>
            <p>
                <button type="submit">Upload</button>
            </p>
        </form>
    </body>
</html>

Yang menjadi syarat agar file mau terupload adalah form harus menggunakan method="POST" and enctype="multipart/form-data". Kemudian perhatikan <input type="file" name="files[]" multiple>, agar bisa memilih banyak file sekaligus input file ini perlu ditambahkan attribute multiple dan attribute name harus menggunakan tanda kurung siku seperti nama="files[]". Jika kita mengupload dua file data yang dikirim akan seperti dibawah

Array
(
    [name] => Array
        (
            [0] => foo.txt
            [1] => bar.txt
        )

    [type] => Array
        (
            [0] => text/plain
            [1] => text/plain
        )

    [tmp_name] => Array
        (
            [0] => /tmp/phpYzdqkD
            [1] => /tmp/phpeEwEWG
        )

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

    [size] => Array
        (
            [0] => 123
            [1] => 456
        )
)

Untuk menyimpan semuanya kita perlu lakukan iterasi di salah satu index arraynya misalkan index name, seperti di bawah

<?php
if(empty($_FILES) == false) {
   foreach($_FILES['files']['name'] as $index => $fileName) {
       if (empty($fileName) || $_FILES['files']['size'][$index] <= 0 || $_FILES['files']['error'][$index] != 0) {
           continue;
       }

       move_uploaded_file($_FILES['files']['tmp_name'][$index], __DIR__.DIRECTORY_SEPARATOR.'files'.DIRECTORY_SEPARATOR.$fileName);
   }

   echo 'File sudah diupload';
}
?>

Dalam iterasi menggunakan foreach dilakukan validasi, jika nama file kosong atau ukuran file kurang dari sama dengan nol atau terjadi error tidak akan di process. Kemudian file dipindahkan menggunakan fungsi move_uploaded_file ke folder files.

Cara 2 Upload File Dengan Bantuan Javascript

Cara berikutnya adalah menggunakan bantuan javascript untuk membuat input browse file dinamic yang bisa ditambahkan sesuai keinginan user. Cara ini cukup bagus untuk pengguna yang kurang memahami cara untuk pilih file banyak sekaligus yang perlu menekan tombol control (CTRL) lebih dulu. Buatlah file dengan nama upload.php dan tambahkan form html seperti di bawah.

<!DOCTYPE html>
<html>
    <head>
        <title>Upload Multiple Files</title>
    </head>
    <body>
        <form action="" method="POST" enctype="multipart/form-data">
            <div id="file-input">
                <p>
                File 1: <input type="file" name="file0">
                </p>
            </div>
            <p>
                <button type="button" onclick="tambahFile()">Tambah</button>
            </p>
            <p>
                <button type="submit">Upload</button>
            </p>
        </form>
        <script>
            let jumlah = 1;
            function tambahFile() {
                let p = document.createElement('p');
                p.innerHTML = `File ${jumlah+1}: <input type="file" name="file${jumlah}">`;
                document.getElementById('file-input').append(p);
                jumlah++;
            }
        </script>
    </body>
</html>

Form yang dibuat sekarang agak berbeda dengan cara 1 dan lebih panjang. Pertama kita perlu untuk menambahkan sebuah div dengan id="file-input" seperti <div id="file-input">. Div ini digunakan untuk menampung sebuah input file. Kedua ada tombol Tambah untuk menambahkan input file. Tombol ini memanggil fungsi javascript pada saat diklik, yaitu fungsi tambahFile() yang didefinisikan di dalam tag <script>. Pada saat diupload data yang dikirim akan seperti di bawah.

Array
(
    ['file0'] => Array
        (
            [name] => foo.txt
            [type] => text/plain
            [tmp_name] => /tmp/phpYzdqkD
            [error] => 0
            [size] => 123
        )

    ['file1'] => Array
        (
            [name] => bar.txt
            [type] => text/plain
            [tmp_name] => /tmp/phpeEwEWG
            [error] => 0
            [size] => 456
        )
)

Untuk menyimpan file juga sama menggunakan iterasi, tetapi lebih sederhana seperti di bawah:

<?php
if(!empty($_FILES)) {
    foreach($_FILES as $index => $file) {
        if (empty($_FILES[$index]['name']) || $_FILES[$index]['size'] <= 0 || $_FILES[$index]['error'] != 0) {
            continue;
        }

        move_uploaded_file($_FILES[$index]['tmp_name'], __DIR__.DIRECTORY_SEPARATOR.'files'.DIRECTORY_SEPARATOR.$_FILES[$index]['name']);
    }

    echo 'File sudah diupload';
}
?>

semua file yang diupload akan ada di dalam variable $_FILES. Gunakan foreach untuk melakukan iterasi dan validasi seperti cara satu. Kemudian dipindahan ke folder files menggunakan fungsi move_uploaded_file.

Kesimpulan

Pada tutorial php upload beberapa file sekaligus ini dijelaskan 2 cara. Cara pertama adalah dengan menggunakan attribute multiple dan kemudian untuk cara kedua menggunakan bantuan javascript untuk menambahkan input file secara dinamis. Tutorial ini juga dilengkapi dengan tutorial video yang bisa dilihat di channel Youtube MyPHPtutorials di video "Tutorial PHP Upload Beberapa File Sekaligus". Jika Anda memiliki pertanyaan silahkan gunakan kolom komentar di bawah. Selamat mecoba.