Upload Banyak Gambar Sekaligus + Preview (PHP & MySQL) - Part 8

🖼️ Upload Banyak Gambar Sekaligus + Preview (PHP & MySQL) - Part 8

Halo coder! Di tutorial ini kita akan membuat fitur upload multiple file (banyak gambar sekaligus), lengkap dengan preview sebelum upload, validasi format file, dan menyimpan ke database.

📦 Fitur Utama

• Upload beberapa gambar sekaligus
• Preview gambar sebelum diupload
• Validasi format & ukuran
• Simpan nama file ke database

🗃️ Struktur Database (tabel gallery)

CREATE TABLE gallery (
  id INT AUTO_INCREMENT PRIMARY KEY,
  filename VARCHAR(255),
  uploaded_at DATETIME DEFAULT CURRENT_TIMESTAMP
);

📁 Folder Upload

/uploads/gallery/

Buat folder dengan izin tulis (CHMOD 755 atau 777).

📄 File: upload-multiple.php

<?php
require 'config.php';

if ($_SERVER['REQUEST_METHOD'] == 'POST') {
  foreach ($_FILES['photos']['tmp_name'] as $i => $tmp_name) {
    $name = basename($_FILES['photos']['name'][$i]);
    $size = $_FILES['photos']['size'][$i];
    $ext = strtolower(pathinfo($name, PATHINFO_EXTENSION));
    $allowed = ['jpg','jpeg','png','gif'];

    if (in_array($ext, $allowed) && $size <= 1048576) {
      $newName = uniqid().'-'.$name;
      move_uploaded_file($tmp_name, "uploads/gallery/".$newName);

      $stmt = $conn->prepare("INSERT INTO gallery (filename) VALUES (?)");
      $stmt->bind_param("s", $newName);
      $stmt->execute();
    }
  }
  $msg = "Semua gambar berhasil diupload!";
}
?>

📷 Form Upload + Preview

<h2>Upload Banyak Gambar Sekaligus</h2>
<?php if (isset($msg)) echo "<p style='color:green;'>$msg</p>"; ?>

<form method="post" enctype="multipart/form-data">
  <input type="file" name="photos[]" accept="image/*" multiple onchange="previewMultiple(event)" required><br><br>

  <div id="preview-area" style="display:flex; gap:10px; flex-wrap:wrap;"></div>
  <br>
  <button type="submit">Upload Sekarang</button>
</form>

<script>
function previewMultiple(event) {
  const area = document.getElementById('preview-area');
  area.innerHTML = '';
  for (let i = 0; i < event.target.files.length; i++) {
    const file = event.target.files[i];
    const reader = new FileReader();
    reader.onload = function(e) {
      const img = document.createElement('img');
      img.src = e.target.result;
      img.style = "max-width:100px; border-radius:6px;";
      area.appendChild(img);
    };
    reader.readAsDataURL(file);
  }
}
</script>

📁 Menampilkan Gambar Galeri dari Database

<?php
$result = $conn->query("SELECT filename FROM gallery ORDER BY uploaded_at DESC");
while($row = $result->fetch_assoc()) {
  echo '<img src="uploads/gallery/'.$row['filename'].'" style="max-width:120px; margin:5px;">';
}
?>

🛡️ Tips Keamanan Upload

• Validasi jenis file (hanya gambar)
• Batasi ukuran file (misal 1MB)
• Gunakan nama file acak (uniqid())
• Jangan izinkan upload file .php, .exe, dll

✅ Kesimpulan

Sekarang aplikasi kamu sudah mendukung upload banyak gambar sekaligus, lengkap dengan preview sebelum diunggah. Fitur ini cocok banget untuk:

• Galeri pengguna
• Upload foto produk
• Halaman admin konten

Di part berikutnya, kita akan bahas cara menghapus file gambar dari server dan database. Sampai jumpa di tutorial selanjutnya! 🔥