Multiple Upload Gambar Dengan PHP MySQLi

Hallo selamat datang kembali di seri tutorial lengkap PHP dari Siap Ngoding. Pada kesempatan ini akan kita bahas bagaimana sih cara upload banyak gambar menggunakan php mysqli.

Pada artikel sebelumnya pernah kita bahas cara upload file menggunakan php dan mysqli. Bedanya pada artikel kali ini dimana sebelumnya hanya satu file yang bisa di upload dalam satu form upload, namun kali ini kita akan membuat banyak file yang bisa di upload dalam satu form.

Multiple Upload Gambar Dengan PHP MySQLi

Multiple upload gambar adalah mengupload gambar dengan jumlah yang lebih dari satu, bisa dua, tiga dan seterusnya. Dalam multiple upload agak sedikit berbeda dengan upload file biasanya. Untuk perbedaannya bisa dilihat pada contoh yang akan di bahas di bawah.

Meyiapkan Database

Pertama-tama siapkan database tempat kita menyimpan nama gambar nantinya, disini saya membuat database dengan nama tutorial dan tabel yang digunakan untuk menyimpannya bernama gambar. Untuk strukturnya bisa dilihat di gambar berikut:

Atau bisa juga dengan mengimport file tutorial.sql berikut di phpmyadmin :

Tutoria.sql

-- phpMyAdmin SQL Dump
-- version 4.8.0
-- https://www.phpmyadmin.net/
--
-- Host: 127.0.0.1
-- Generation Time: Apr 26, 2020 at 04:42 PM
-- Server version: 10.1.31-MariaDB
-- PHP Version: 5.6.35
 
SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET AUTOCOMMIT = 0;
START TRANSACTION;
SET time_zone = "+00:00";
 
 
/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8mb4 */;
 
--
-- Database: `tutorial`
--
 
-- --------------------------------------------------------
 
--
-- Table structure for table `gambar`
--
 
CREATE TABLE `gambar` (
  `gambar_id` int(11) NOT NULL,
  `gambar_nama` varchar(100) DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
 
--
-- Indexes for dumped tables
--
 
--
-- Indexes for table `gambar`
--
ALTER TABLE `gambar`
  ADD PRIMARY KEY (`gambar_id`);
 
--
-- AUTO_INCREMENT for dumped tables
--
 
--
-- AUTO_INCREMENT for table `gambar`
--
ALTER TABLE `gambar`
  MODIFY `gambar_id` int(11) NOT NULL AUTO_INCREMENT;
COMMIT;
 
/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

Struktur Project

Ada tiga file yang terlibat dalam membuat multiple upload gambar, untuk struktur projectnya bisa dilihat di gambar berikut :

Menyiapkan Koneksi PHP dengan Database

Langkah kedua yaitu menyiapkan file koneksi yang menghubungkan database dengan php. Disini saya beri nama koneksi.php

koneksi.php

<?php 
$koneksi = mysqli_connect("localhost","root","","tutorial");
 ?>

Membuat form upload gambar

Langkah selanjutnya kita siapkan form untuk mengupload gambar. Dalam form ini nantinya akan kita upload banyak gambar dan kita simpan dalam database yang sudah kita siapkan sebelumnya. Untuk form upload disini saya buat dalam file index.php

<html>
<head>
	<title>www.siapngoding.my.id - Upload multi file menggunakan php mysqli</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
	<div class="container">
		<h2 style="text-align: center;">UPLOAD MULTI FILE PHP</h2>
			<form action="proses_act.php" method="post" enctype="multipart/form-data">			
				<div class="form-group">
					<label>Foto :</label>
					<input type="file" name="foto[]" required="required"  multiple />
					<p style="color: red">Ekstensi yang diperbolehkan .png | .jpg | .jpeg | .gif</p>
				</div>			
				<input type="submit" name="" value="Simpan" class="btn btn-primary">
			</form>
		</div>
	</body>
	</html>

Untuk tampilannya bisa dilihat di gambar berikut.

Berikut penjelasan beberapa uraian dari syntax di atas.

<form action="proses_act.php" method="post" enctype="multipart/form-data">

Disini kita akan membuat form dengan menggunakan model post untuk mengirim data, dan kita memerlukan atribut enctype dengan nilai multipart/form-data. Enctype merupakan atribut yang berperan dalam menentukan data yang dikirim ke server, dan atribut ini hanya bisa digunakan pada saat menggunakan method post. action=”proses_act.php” adalah file aksi yang digunakan untuk memproses data inputan.

<input type="file" name="foto[]" required="required"  multiple />
  • <input type=”file” : Disini kita akan membuat inputan yang bertipe file, tipe file ini sebenarnya untuk umum, bisa berupa file gambar, dokument dan sebegainya.
  • name=”foto[]” ini maksudnya disini sistem akan mengenal semua yang kita input bernama foto, sedangkan maksud dari kurung siku [] adalah data nantinya kita input bertipe array.
  • required=”required” adalah suatu fungsi yang menandakan inputan ini tidak boleh dikosongkan.
    multiple dimana menandakan banyak file yang bisa kita input didalam inputan ini.

Syntax lengkapnya sebegai berikut :

<html>
<head>
	<title>www.siapngoding.my.id - Upload multi file menggunakan php mysqli</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
	<div class="container">
		<h2 style="text-align: center;">UPLOAD MULTI FILE PHP</h2>
		<?php
		if(isset($_GET['alert'])){
			if($_GET['alert']=="gagal_ukuran"){
				?>
				<div class="alert alert-warning">
					<strong>Warning!</strong> Ukuran File Terlalu Besar
				</div>
				<?php
			}elseif ($_GET['alert']=="gagal_ektensi") {
				?>
				<div class="alert alert-warning">
					<strong>Warning!</strong> Ekstensi Gambar Tidak Diperbolehkan
				</div>
				<?php
			}elseif ($_GET['alert']=="simpan") {
				?>
				<div class="alert alert-success">
					<strong>Success!</strong> Gambar Berhasil Disimpan
				</div>
				<?php
			}				
		}
		?>
		<form action="proses_act.php" method="post" enctype="multipart/form-data">			
			<div class="form-group">
				<label>Foto :</label>
				<input type="file" name="foto[]" required="required"  multiple />
				<p style="color: red">Ekstensi yang diperbolehkan .png | .jpg | .jpeg | .gif</p>
			</div>			
			<input type="submit" name="" value="Simpan" class="btn btn-primary">
		</form>
	</div>
</body>
</html>

Berikut artikel yang berkaitan dengan materi ini :

Membuat file proses input data

Langkah terakhir yaitu kita akan membuat sebuah file aksi dimana file aksi ini berfungsi untuk memproses data yang akan disimpan dalam database, serta file gambar yang akan di upload dalam direktori yang sudah disediakan. Nama file aksi ini harus sesuai dengan action=”proses_act.php” dalam tag form diatas.

<?php
include 'koneksi.php';
$limit = 10 * 1024 * 1024;
$ekstensi =  array('png','jpg','jpeg','gif');
$jumlahFile = count($_FILES['foto']['name']);
 
for($x=0; $x<$jumlahFile; $x++){
	$namafile = $_FILES['foto']['name'][$x];
	$tmp = $_FILES['foto']['tmp_name'][$x];
	$tipe_file = pathinfo($namafile, PATHINFO_EXTENSION);
	$ukuran = $_FILES['foto']['size'][$x];	
	if($ukuran > $limit){
		header("location:index.php?alert=gagal_ukuran");		
	}else{
		if(!in_array($tipe_file, $ekstensi)){
			header("location:index.php?alert=gagal_ektensi");			
		}else{		
			move_uploaded_file($tmp, 'file/'.date('d-m-Y').'-'.$namafile);
			$x = date('d-m-Y').'-'.$namafile;
			mysqli_query($koneksi,"INSERT INTO gambar VALUES(NULL, '$x')");
			header("location:index.php?alert=simpan");
		}
	}
}
$limit = 10 * 1024 * 1024;
  • Variabel limit merupakan variabel yang menyimpan data total ukuran sebesar 10 mb. Ini berfungsi untuk membatasi ukuran file yang boleh di upload nantinya.
$ekstensi =  array('png','jpg','jpeg','gif');
  • Variabel ekstensi ini menyimpan data ekstensi yang diperbolehkan. Ini juga berfungsi untuk kita batasi ekstensi yang bisa di upload nantinya.
$jumlahFile = count($_FILES['foto']['name']);
  • Variabel jumlahFile ini adalah variabel yang menyimpan jumlah file yang di upload pada form upload sebelumnya.

Oleh karena file yang kita upload ada beberapa file gambar, maka kita harus membuatnya dalam perulangan yang disini saya menggunakan perulangan for.

for($x=0; $x<$jumlahFile; $x++)
  • $x=0, pertama-tama kita inisialkan dulu $x=0, ini maksudnya data yang pertama nanti akan diinisilkan array 0.
  • $x<$jumlahFile, variabel x kurang dari jumlahFile. ini merupakan batasan yang harus kita buat.
  • $x++, dimana jika batasan belum tercapai atau nilai x masih leih kurang dari jumlahFile maka nilai x+1.
$namafile = $_FILES['foto']['name'][$x];
$tmp = $_FILES['foto']['tmp_name'][$x];
$tipe_file = pathinfo($namafile, PATHINFO_EXTENSION);
$ukuran = $_FILES['foto']['size'][$x];

Syntax ini merupakan identitas dari file gambar yang kita upload. Dimana identitas yang diperlukan ada nama, tipe file, ukuran. Sedangkan variabel tmp disini menyimpan sebuah fungsi dimana fungsi ini php gunakan untuk mengirim file ke web server.

if($ukuran > $limit)

Merupakan perintah pengecekan dimana akan cek jika ukuran file yang diupload lebih besar dari limit (ukuran yang sudah ditetapkan). Maka perintah yang ada dalam pengecekan ini akan dijalankan.

if(!in_array($tipe_file, $ekstensi))

Merupakan pengecekan dimana ekstensi yang diperbolehkan. Disini maksudnya jika ekstensi dari file yang diupload tidak sesuai dengan ekstensi yang diperbolehkan maka perintah yang didalam pengecekan ini dijalankan.

move_uploaded_file($tmp, 'file/'.date('d-m-Y').'-'.$namafile);

Ini maksudnya adalah file gambar yang kita upload tadinya akan di simpan didalam folder “file/”, dengan nama file dikombinasikan antara tanggal dan nama file yang di upload.

Untuk hasilnya dapat dilihat pada gambar berikut :

Oke sekian dulu materi multiple upload gambar gengan php mysqli. Kritik dan saran sangat kami butuhkan untuk peningkatan kedepannya. Terima kasih

Silahkan Untuk mendownlad source code di link berikut :

DOWNLOAD
www.siapngoding.my.id
Thank You
Incoming Search Terms:
  • upload banyak gambar php
  • contoh upload gambar dengan file reader dan php
  • php apload gambar
  • Batas ukuran maksimal gambar di databasr mysqli
  • Cara koneksikan PhP ke MySQL untuk upload gambar
  • Cara Membaca Karakter Dari Kanan Sebuah String di PHP
  • cara membuat upload gambar selain input type file
  • Cara upload 2 file di PHP
  • CARA UPLOAD GAMBAR DAN JUDUL KE PHP
  • upload foto banyak php