Upload
banyak gambar pada satu form dengan PHP
merupakan sebuah rangkaian salah proses input pada suatu form halaman website.
Proses upload gambar sendiri telah menjadi suatu hal umum dan biasa dilakukan.
Contoh yang umum upload banyak gambar pada satu form dengan PHP misalnya sebuah halaman form pendaftaran yang mewajibkan user untuk upload banyak
gambar berupa ketentuan dan syarat yaitu upload foto, scan
ID card, scan dokumen dan sebagainya. Contoh kasus lain lagi yaitu sebuah
halaman website penjualan yang diwajibkan untuk upload banyak gambar pada satu
form dengan satu jenis barang yang sama namun gambar berbeda.
Sesuai dengan materi tutorial yang akan dibahas kali ini, kita akan mencoba bagaimana cara upload banyak gambar pada satu form yang dimaksud dengan cara saat hendak melakukan upload gambar banyak sekaligus dalam satu klik tombol saja. Yang menjadi pertanyaan adalah, Bagaimana cara mengaplikasikan fungsi upload banyak gambar pada satu form ke dalam sebuah script PHP ..?. Jawabannya kita akan temukan pada pembahasan tutorial berikut. Silahkan simak langkah demi langkah pembahasan tentang Upload banyak gambar pada satu form dengan PHP berikut:
* Buatlah terlebih sebuah database dan tabel database untuk penyimpanan file gambarnya, contoh database (multi_upload dengan tabel database file_materi). Buatlah seperti contoh gambar berikut:
<html>
<head>
<meta
http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>kodingbuton.com</title>
<link
href="css/bootstrap.min.css" rel="stylesheet"
type="text/css" />
</head>
<body
style="background-color:#CFF">
<center>
<h3><font
color="#FF0080"> Upload Banyak Gambar Pada Satu Form Dengan
PHP</font></h3>
<h3> Tutorial
<a
href="https://www.kodingbuton.com/">kodingbuton.com</a></h3>
</center>
<?php
$conn=($GLOBALS["___mysqli_ston"]
= mysqli_connect("localhost", "root", "")) or
die("Tidak Terkoneksi");
$db=mysqli_select_db($GLOBALS["___mysqli_ston"],
"multi_upload") or die ("Database Tidak Terdeteksi");
?>
<div
class="row">
<div
class="col-lg-2">
</div>
<div
class="col-lg-8">
<div
class="panel-body">
<div
class="panel-heading"> <a href="upload.php">
<button class='btn btn-sm btn-primary'>Input Data
Baru</button></a></div>
<table
class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th><b>Judul
</b></th>
<th><b>Gambar
ke-1</b></th>
<th><b>Gambar
ke-2</b></th>
<th><b>Gambar
ke-3</b></th>
</tr>
</thead>
<?php
$pr=mysqli_query($GLOBALS["___mysqli_ston"],
"SELECT * FROM file_materi");
while($row=mysqli_fetch_array($pr)){
?>
<tr>
<td><?php
echo $row['judul'];?></td>
<td><center>
<img src="file/<?php echo $row['gambar1'];?>"
class="thumbnails" width="150"
height="120"></center></td>
<td><center>
<img src="file/<?php echo $row['gambar2'];?>"
class="thumbnails" width="150"
height="120"></center></td>
<td><center>
<img src="file/<?php echo $row['gambar3'];?>"
class="thumbnails" width="150" height="120"></center></td>
</tr>
<?php }
?>
</table></div></div></div>
<!-- Javascript
untuk popup modal Delete-->
<script
src="js/jquery.min.js"></script>
<script
src="js/bootstrap.min.js"></script>
</body>
* Buat lagi file upload.php yang berfungsi untuk proses update gambar dan copy dengan script berikut:
<html>
<head>
<meta
http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>kodingbuton.com</title>
<link
href="css/bootstrap.min.css" rel="stylesheet"
type="text/css" />
<link
href="css/components.css" rel="stylesheet"
type="text/css" />
<link
href="css/dropify/css/dropify.min.css" type="text/css"
rel="stylesheet" media="screen,projection">
</head>
<body
style="background-color:#CFF">
<center>
<h3><font
color="#FF0080"> Upload Banyak Gambar Pada Satu Form Dengan PHP
</font></h3>
<h5> Tutorial
<a
href="https://www.kodingbuton.com/">kodingbuton.com</a></h5>
</center>
<?php
$conn=($GLOBALS["___mysqli_ston"]
= mysqli_connect("localhost", "root", "")) or
die("Tidak Terkoneksi");
$db=mysqli_select_db($GLOBALS["___mysqli_ston"],
"multi_upload") or die ("Database Tidak Terdeteksi");
?>
<div
class="row">
<div
class="col-lg-3">
</div>
<div
class="col-lg-6">
<div
class='card-box'>
<?php
if(isset($_POST['simpan'])){
$judul=$_POST['judul'];
$gambar1=$_FILES['gambar1']['name'];
$gambar2=$_FILES['gambar2']['name'];
$gambar3=$_FILES['gambar3']['name'];
if(strlen($gambar1)>0){
if(is_uploaded_file($_FILES['gambar1']['tmp_name'])){
move_uploaded_file($_FILES['gambar1']['tmp_name'],"file/".$gambar1);
}
}
if(strlen($gambar2)>0){
if(is_uploaded_file($_FILES['gambar2']['tmp_name'])){
move_uploaded_file($_FILES['gambar2']['tmp_name'],"file/".$gambar2);
}
}
if(strlen($gambar3)>0){
if(is_uploaded_file($_FILES['gambar3']['tmp_name'])){
move_uploaded_file($_FILES['gambar3']['tmp_name'],"file/".$gambar3);
}
}
$a=mysqli_query($GLOBALS["___mysqli_ston"],
"insert into file_materi (id_file,judul,gambar1,gambar2,gambar3)
values('','$judul','$gambar1','$gambar2','$gambar3')");
if($a){
echo '<div
class="alert alert-success alert-st-one" role="alert">
<span class="adminpro-icon adminpro-checked-pro
admin-check-pro"></span><button type="button"
class="close" data-dismiss="alert"
aria-hidden="true">×</button><p
class="message-mg-rt">Data Sukses
Tersimpan,..!</p></div>';
}else{
echo '<div
class="alert alert-danger alert-dismissable"><button
type="button" class="close" data-dismiss="alert"
aria-hidden="true">×</button>Ups, Data Gagal Di
simpan !</div>';
}
echo "<meta
http-equiv='refresh' content='5; url=index.php'>";
}
?>
<hr>
<form
action="" method="post"
enctype="multipart/form-data" class="form-horizontal">
<div class="form-group">
<label class="control-label
col-lg-2 col-lg-2">Judul</label>
<div class="col-lg-8">
<input
id="judul" name="judul" type="text" class='form-control'
required='' data-errormessage-value-missing='judul masih kosong' >
</div></div>
<div
class="form-group">
<label
class="col-sm-2 control-label"> Gambar 1</label>
<div
class="col-sm-6">
<input
type="file" name="gambar1" id="input-file-max-fs"
class="dropify" data-max-file-size="5M" />
</div>
</div>
<div
class="form-group">
<label
class="col-sm-2 control-label"> Gambar 2 </label>
<div
class="col-sm-6">
<input
type="file" name="gambar2" id="input-file-max-fs"
class="dropify" data-max-file-size="5M" />
</div>
</div>
<div
class="form-group">
<label
class="col-sm-2 control-label">Gambar 3</label>
<div
class="col-sm-6">
<input
type="file" name="gambar3" id="input-file-max-fs"
class="dropify" data-max-file-size="5M" />
</div>
</div>
<div
class="col-lg-2">
<input
class="btn btn-success" type="submit"
name="simpan" value="Simpan">
</div>
</form>
</div></div></div>
<hr>
<script
src="js/jquery.min.js"></script>
<script
src="js/bootstrap.min.js"></script>
<script
src="css/dropify/js/dropify.min.js"></script>
<script
type="text/javascript">
$(document).ready(function(){
// Basic
$('.dropify').dropify();
// Translated
$('.dropify-fr').dropify({
messages: {
default: 'Glissez-déposez
un fichier ici ou cliquez',
replace: 'Glissez-déposez
un fichier ou cliquez pour remplacer',
remove: 'Supprimer',
error: 'Désolé, le fichier trop volumineux'
}
});
// Used events
var drEvent =
$('.dropify-event').dropify();
drEvent.on('dropify.beforeClear',
function(event, element){
return confirm("Do you
really want to delete \"" + element.filename + "\"
?");
});
drEvent.on('dropify.afterClear',
function(event, element){
alert('File deleted');
});
});
</script>
</body>
</html>
*
Simpan file PHP yang sudah dibuat
tersebut dalam sebuah folder dan letakan pada folder htdocs yang
terletak pada folder xampp yang telah ter-instal pada komputer anda, (C:\xampp\htdocs\multi-upload).
*
Tambahkan sebuah folder dengan nama
"file" folder "file"
tersebut berfungsi sebagai direktori folder penampungan file gambar.
*
Jalankan browser dan ketikan url
pada address bar (contoh: localhost/ multi-upload). Jika
semua proses telah sesuai dan berjalan lancar maka akan tampil halaman utama
sistem.
* Saat halaman utama tampil, silahkan klik tombol “Iput data baru” maka, akan tampak form upload banyak gambar pada satu form seperti berikut:
*
Silahkan Pilih 3 (tiga) file
gambar yang berbeda pada halaman
for diatas kemudian simpan form input tersebut.
* Jika proses berhasil tersimpan maka, akan tampak seperti contoh gambar berikut:
Demikian pembahasan
tutorial kali ini semoga apa yang saya bagikan ini dapat bermanfaat dan menjadi
Inspirasi untuk proses Upload
banyak gambar pada satu form dengan PHP
yang Anda buat.
Lihat
juga:
- Mengganti File Gambar Pada Folder Direktori Dengan PHP
- Cara Review sebelum Upload Gambar Pada PHP dan MySQL
- Cara Membatasi Size Maksimum Upload File Gambar, PHP dan MySQL
Apabila ada source
code yang tidak berjalan, error atau tidak sesuai,, silahkan isi kolom
komentar pada bagian bawah tutorial ini...!.
*) Silahkan
kunjungi Sitemap (peta situs
kami) untuk
menemukan Inspirasi Source Code lainnya (Aplikasi, Sistem Informasi, Sistem
Pendukung Keputusan, Sistem Pakar, E-Commerce), Tutorial, Judul Skripsi dan
lain-lain.
**) Kami juga menerima jasa pembuatan Aplikasi untuk Skripsi/Tugas Akhir, dan lain-lain.
file css dan jquery nya dimana gan?
ReplyDeletePost a Comment