Informasi Terkini

Mas Yon

PHP

29 October, 2025

Fitur multi upload image banyak digunakan pada aplikasi web, misalnya untuk galeri, e-commerce, atau sistem manajemen konten. Dengan multi upload, pengguna dapat mengunggah lebih dari satu gambar sekaligus hanya dengan sekali klik.

Pada artikel ini, kita akan membahas cara membuat multi upload image sederhana menggunakan JavaScript (untuk preview) dan PHP (untuk proses upload ke server).

1. Struktur Folder

Buat folder project seperti berikut:


/multi-upload
    |-- index.php
    |-- upload.php
    |-- uploads/   (folder penyimpanan gambar)

Pastikan folder uploads/ diberi izin write (misalnya chmod 777 pada server Linux) agar file bisa tersimpan.

2. Membuat Form Upload (index.php)


<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Multi Upload Image dengan JavaScript dan PHP</title>
  <style>
    body { font-family: Arial, sans-serif; margin: 20px; }
    .preview img { width: 120px; margin: 5px; border-radius: 8px; border: 1px solid #ddd; }
  </style>
</head>
<body>
  <h2>Multi Upload Image</h2>
  <form action="upload.php" method="post" enctype="multipart/form-data">
    <input type="file" name="images[]" id="images" multiple accept="image/*">
    <div class="preview" id="preview"></div>
    <br>
    <button type="submit">Upload</button>
  </form>

  <script>
    const input = document.getElementById("images");
    const preview = document.getElementById("preview");

    input.addEventListener("change", function () {
      preview.innerHTML = ""; // reset preview
      for (let i = 0; i < this.files.length; i++) {
        let file = this.files[i];
        let reader = new FileReader();

        reader.onload = function (e) {
          let img = document.createElement("img");
          img.src = e.target.result;
          preview.appendChild(img);
        };

        reader.readAsDataURL(file);
      }
    });
  </script>
</body>
</html>

Penjelasan:

multiple → memungkinkan memilih banyak gambar.
accept="image/*" → hanya menerima file gambar.
JavaScript digunakan untuk menampilkan preview sebelum file di-upload.

3. Membuat Script Upload (upload.php)


<?php
// Folder penyimpanan
$targetDir = "uploads/";

if (!empty($_FILES['images']['name'][0])) {
    foreach ($_FILES['images']['name'] as $key => $name) {
        $tmpName = $_FILES['images']['tmp_name'][$key];
        $error   = $_FILES['images']['error'][$key];

        if ($error === UPLOAD_ERR_OK) {
            // Amankan nama file
            $fileName = time() . "_" . basename($name);
            $targetFile = $targetDir . $fileName;

            // Validasi jenis file (hanya gambar)
            $fileType = strtolower(pathinfo($targetFile, PATHINFO_EXTENSION));
            $allowedTypes = ['jpg', 'jpeg', 'png', 'gif'];

            if (in_array($fileType, $allowedTypes)) {
                if (move_uploaded_file($tmpName, $targetFile)) {
                    echo "Upload berhasil: " . htmlspecialchars($fileName) . "<br>";
                } else {
                    echo "Gagal mengupload file: " . htmlspecialchars($name) . "<br>";
                }
            } else {
                echo "Format tidak diizinkan: " . htmlspecialchars($name) . "<br>";
            }
        }
    }
} else {
    echo "Tidak ada file yang dipilih.";
}
?>

Penjelasan:

Looping digunakan karena $_FILES berbentuk array ketika multiple dipakai.
File diberi prefix time() agar nama tidak bentrok.
Validasi tipe file hanya menerima jpg, jpeg, png, dan gif.
File disimpan ke folder uploads/.

4. Hasil

Saat user memilih banyak gambar → preview otomatis muncul.
Setelah klik Upload → semua file diproses di upload.php dan tersimpan ke folder uploads/.

5. Tips Tambahan

Batasi ukuran file dengan ini_set atau MAX_FILE_SIZE pada form.
Gunakan uniqid() atau hashing untuk keamanan nama file.
Untuk aplikasi besar, sebaiknya simpan data file ke database.

Kesimpulan

Dengan kombinasi JavaScript (untuk preview gambar) dan PHP (untuk memproses upload), kita dapat dengan mudah membuat fitur multi upload image. Teknik ini dapat dikembangkan lebih lanjut dengan progress bar, drag & drop, atau integrasi ke database.

Cara Membuat Multi Upload Image dengan JavaScript dan PHP

1. Struktur Folder

2. Membuat Form Upload (index.php)

Penjelasan:

3. Membuat Script Upload (upload.php)

Penjelasan:

4. Hasil

5. Tips Tambahan

Kesimpulan

Tag

Komentar

Tag

Arsip

Pembuatan Surat Menggunakan Aplikasi

Berita Populer & Terbaru

9 Manfaat Ginseng Untuk Kesehatan

Jenis Tanaman Herbal dan Manfaat Untuk Kesehatan

Objek Pajak yang Dikecualikan dari PPh

Cara Membuat Multi Upload Image dengan JavaScript dan PHP

Solusi Ketika Sedang Lupa Effin

Ketentuan Gugatan dalam Undang-Undang Pengadilan Pajak

MK Batasi Hak Pejabat TUN Ajukan PK. Angin Segar bagi Wajib Pajak dalam Sengketa Pajak

Legal Standing Perikatan dalam Konteks Perpajakan

Cara Membangun, Menguji, Menggunakan, dan Mendokumentasikan REST API Menggunakan Express dan Node

Kriteria subjek pajak luar negeri untuk orang pribadi

Jajak Pendapat Online

Kontak

Tag

Cara Membuat Multi Upload Image dengan JavaScript dan PHP

1. Struktur Folder

2. Membuat Form Upload (index.php)

Penjelasan:

3. Membuat Script Upload (upload.php)

Penjelasan:

4. Hasil

5. Tips Tambahan

Kesimpulan

Tag

Membagikan

Komentar

Berita Terkait

Tag

Arsip

Pembuatan Surat Menggunakan Aplikasi

Berita Populer & Terbaru

Jajak Pendapat Online

Kontak

Tag