Cara Membuat Upload Gambar Multiple dengan JavaScript dan PHP

Membuat fitur upload gambar lebih dari satu file merupakan kebutuhan umum dalam pengembangan website, terutama untuk sistem seperti blog, marketplace, atau CMS.

Dengan bantuan JavaScript, kita bisa membuat input file yang dinamis, sedangkan PHP digunakan untuk memproses dan menyimpan file ke server. Pada tutorial ini, kita akan membuat form upload gambar dengan tombol tambah input dan batas maksimal 5 file.

Langkah pertama adalah membuat struktur HTML dan styling sederhana untuk menampilkan input upload gambar.

<style>
  .upload-images {
    display: flex;
    flex-wrap: wrap;
  }
  .upload-image {
    width: 20%;
    margin: 10px;
  }
  .upload-image input[type="file"] {
    display: none;
  }
  .upload-image label {
    border: 1px solid #ccc;
    padding: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }
</style>

<form action="upload.php" method="post" enctype="multipart/form-data">
  <div class="upload-images">
    <div class="upload-image">
      <input type="file" name="images[]" id="image-1">
      <label for="image-1">Tambah Gambar</label>
    </div>
  </div>

  <button type="button" id="add-image">Tambah Input</button>
  <button type="submit">Kirim</button>
</form>

Selanjutnya, gunakan JavaScript untuk menambahkan input file secara dinamis dengan batas maksimal 5 gambar.

<script>
  var uploadImages = document.querySelector(".upload-images");
  var addImage = document.getElementById("add-image");
  var imageIndex = 1;

  addImage.addEventListener("click", function() {
    if (imageIndex < 5) {
      imageIndex++;

      var uploadImage = document.createElement("div");
      uploadImage.classList.add("upload-image");

      uploadImage.innerHTML = `
        <input type="file" name="images[]" id="image-${imageIndex}">
        <label for="image-${imageIndex}">Tambah Gambar</label>
      `;

      uploadImages.appendChild(uploadImage);
    }
  });
</script>

Kode di atas akan menambahkan input file baru setiap tombol diklik, dengan batas maksimal 5 input.

Setelah itu, kita proses file yang diupload menggunakan PHP.

<?php
if (isset($_FILES['images'])) {

  $total = count($_FILES['images']['name']);

  for ($i = 0; $i < $total; $i++) {

    $name = $_FILES['images']['name'][$i];
    $tmp  = $_FILES['images']['tmp_name'][$i];
    $size = $_FILES['images']['size'][$i];
    $error = $_FILES['images']['error'][$i];

    if ($error === 0 && $size > 0) {

      $target = "images/" . basename($name);

      if (move_uploaded_file($tmp, $target)) {
        echo "Gambar " . ($i + 1) . " berhasil diupload.<br>";
      } else {
        echo "Gambar " . ($i + 1) . " gagal diupload.<br>";
      }

    }
  }
}
?>

Script PHP di atas akan melakukan loop pada setiap file yang dikirim dari form, kemudian memindahkannya dari folder sementara ke folder tujuan menggunakan fungsi move_uploaded_file.

Agar lebih aman, kamu bisa menambahkan validasi seperti membatasi tipe file hanya gambar (jpg, png) dan ukuran maksimal file.

Dengan kombinasi JavaScript dan PHP ini, kamu sudah bisa membuat fitur upload gambar multiple yang dinamis dan siap digunakan dalam berbagai kebutuhan website.