Cara Membuat Form Upload Banyak Gambar dengan HTML, JavaScript, dan PHP (Maksimal 5 File)

Membuat fitur upload gambar adalah salah satu kebutuhan umum dalam pengembangan website. Mulai dari website berita, marketplace, hingga blog seperti kucatat.com pasti membutuhkan fitur ini.

Pada tutorial ini, kamu akan belajar cara membuat form upload banyak gambar menggunakan HTML, JavaScript, dan PHP, dengan batas maksimal 5 file.

Fitur ini sangat berguna agar pengguna bisa mengirim beberapa gambar sekaligus tanpa harus upload satu per satu.

Membuat Form Upload Gambar

Langkah pertama adalah membuat form HTML untuk mengirim file ke server. Pastikan kamu menggunakan atribut enctype=”multipart/form-data” agar file bisa diproses oleh PHP.

Berikut contoh kode form:

<form action="upload.php" method="post" enctype="multipart/form-data">
  <div class="upload-images">
    <div class="input-group">
      <input type="file" name="images[]">
    </div>
  </div>
  <button type="button" class="add-input">Tambah</button>
  <button type="submit">Kirim</button>
</form>

Penjelasan singkat:

• name=”images[]” digunakan agar file dikirim dalam bentuk array
• tombol “Tambah” digunakan untuk menambahkan input file baru

Menambahkan Input File dengan JavaScript

Agar pengguna bisa menambahkan lebih dari satu gambar, kita gunakan JavaScript untuk membuat input file secara dinamis.

Berikut script-nya:

const addInput = document.querySelector(".add-input");
const uploadImages = document.querySelector(".upload-images");

let inputCount = 1;

addInput.addEventListener("click", function() {
  if (inputCount < 5) {
    const inputGroup = document.createElement("div");
    inputGroup.classList.add("input-group");
    inputGroup.innerHTML = `
      <input type="file" name="images[]">
    `;
    uploadImages.appendChild(inputGroup);
    inputCount++;
  }
});

Penjelasan:

• inputCount digunakan untuk membatasi maksimal 5 file
• setiap klik tombol, akan menambahkan input baru
• pengguna tidak bisa menambahkan lebih dari 5 gambar

Proses Upload Gambar dengan PHP

Setelah form dikirim, file akan diproses oleh PHP menggunakan variabel $_FILES.

Berikut contoh kode upload.php:

<?php
if (isset($_FILES['images'])) {
  for ($i = 0; $i < count($_FILES['images']['name']); $i++) {
    $image = $_FILES['images']['name'][$i];
    $target = "images/" . basename($image);

    if (move_uploaded_file($_FILES['images']['tmp_name'][$i], $target)) {
      echo "Gambar " . ($i + 1) . " berhasil diupload.<br>";
    } else {
      echo "Gambar " . ($i + 1) . " gagal diupload.<br>";
    }
  }
}
?>

Penjelasan:

• $_FILES[‘images’] berisi semua file yang dikirim
• loop digunakan untuk memproses setiap file
• move_uploaded_file digunakan untuk memindahkan file ke folder server

Tips Keamanan Upload File

Contoh di atas masih sederhana. Untuk penggunaan di website production, kamu wajib menambahkan validasi seperti:

• Membatasi ukuran file (misalnya maksimal 2MB)
• Membatasi tipe file (hanya jpg, png, jpeg)
• Mengganti nama file agar tidak bentrok
• Menghindari upload file berbahaya

Kesimpulan

Dengan kombinasi HTML, JavaScript, dan PHP, kamu bisa membuat fitur upload banyak gambar dengan mudah.

Fitur ini sangat cocok digunakan untuk:

• Website berita
• Blog
• Marketplace
• Sistem manajemen konten

Pastikan kamu menambahkan validasi keamanan agar website tetap aman dan performa tetap optimal.

Kalau kamu punya versi lanjutan (misalnya upload dengan preview gambar atau drag & drop), kirim saja nanti kita bikin artikel lanjutannya biar jadi seri dan kuat SEO-nya