Cara Membuat Upload Multiple Image dengan Ajax dan Bootstrap Modal – Hai ketemu lagi dengan saya dan pada kesempatan kali ini saya akan membahas lagi tentang upload gambar/file. Setelah sebelumnya saya membuat beberapa tutorial tentang upload ini namun masih satu gambar/file, jadi kali ini saya akan membuat dengan multiple file. Jika sobat ingin melihat postingan sebelumnya yang tentunya lebih simple dan lebih mudah sobat bisa kunjungi link dibawah
Baca juga :
Cara membuat Crop and Upload Menggunakan Ajax pada PHP
Cara Mengupload dengan Hapus Gambar menggunakan Ajax dan PHP
Cara Upload Gambar dari URL Menggunakan Ajax dan PHP
Cara Mengupload File dengan Ajax Tanpa Loading pada PHP
Cara Membuat Upload File Dengan Progressbar Menggunakan Ajax pada PHP
CRUD (Create, Read, Update, Delete) Dengan Ajax Tanpa Loading PHP
Membuat Upload dan Resize/Compress Gambar denga Ajax pada PHP
Cara Membuat Upload dan Ekstrak Zip pada PHP
Cara Membuat Upload Multiple Image dengan Ajax dan Bootstrap Modal
Berbeda dengan pembahasan sebelumnya yang membaca gambar melalui database. Pada contoh kali ini saya juga akan mencontohkan untuk membaca/menampilkan gambar langsung dengan membaca folder. Jika sobat ingin menampilkan berdasarkan data yang ada pada database maka sobat bisa baca tutorial sebelumnya.
Membuat Database MySQL
1. Pertama yang WAJIB ada yaitu sobat harus membuat sebuah database. Sobat bisa menggunakan tools bantu seperti navicat, heidi SQL atau lainnya. Sobat juga bisa membuatnya dengan mengakses url localhost/phpmyadmin -> klik tab Database dan tuliskan db_dewankomputer-> Klik tombol Create/Buat.
2. Buat tabel untuk mengetesnya dengan mengetikkan query dibawah ini pada tab SQL lalu klik tombol Kirim/Go
CREATE TABLE `tbl_upload` ( `id` int(11) NOT NULL AUTO_INCREMENT, `nama_file` varchar(255) CHARACTER SET latin1 COLLATE latin1_swedish_ci NULL DEFAULT NULL, PRIMARY KEY (`id`) USING BTREE )
Membuat Multiple Upload Gambar
Setelah database sudah dibuat selanjutnya kita baru membuat datanya ditampilkan ke dalam tabel dan membuat sortnya. Berikut langkah-langkahnya :
1.Buat file koneksi.php yang berfugsi untuk menyambungkan aplikasi dengan database dan isikan dengan kode dibawah
<?php
define('HOST','localhost');
define('USER','root');
define('PASS','');
define('DB1', 'db_dewankomputer');
// Buat Koneksinya
$db1 = new mysqli(HOST, USER, PASS, DB1);
?>
isikan sesuai dengan host, user, password, dan nama database sobat. Untuk contoh di bawah ini saya berinama database dengan nama db_dewankomputer.
Jika sobat ingin tahu cara mengkoneksikan dengan dua database atau lebih dalam satu aplikasi maka sobat bisa kunjungi postingan dibawah ini
2. Buat file index.php dan masukkan librari css dan js pada tag <head> seperti dibawah ini
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
Untuk librari css dan js saya menggunakan online karena hanya untuk keperluan demo, jika sobat ingin membuatnya untuk development maka sobat perlu mendownloadnya terlebih dahulu atau sobat bisa mendowload bersama project ini diakhir postingan. Karena kita menggunakan Ajax jadi kita wajib untuk memasukkan jquery.js/jquery.min.js. Dan karena kita menggunakan Popover dari bootstrap maka wajib untuk memasukkan librari bootstrap.
3. Masih di file index.php sobat tambahkan kode dibawah pada tag <body>…</body>
<nav class="navbar navbar-dark bg-primary">
<a class="navbar-brand text-white" href="index.php">
Dewan Komputer
</a>
</nav>
<div class="container">
<h3 align="center" class="mt-3">Upload Multiple Image dengan Ajax dan Bootstrap Modal</h3>
<div align="center">
<button type="button" data-toggle="modal" data-target="#uploadModal" class="btn btn-info mt-3 mb-3">Upload Images</button>
</div>
<div class="row" id="gallery">
<?php
$images = glob("upload/*.*");
foreach($images as $image){
echo '<div class="col-md-1" align="center" ><img src="' . $image .'" width="100px" height="100px" style="margin-top:15px; padding:8px; border:1px solid #ccc;" /></div>';
}
?>
</div>
</div>
Penjelasan :
Pada kode dibawah adalah script yang berfungsi untuk membaca file/gambar yang berada pada folder upload. Seperti yang sudah saya jelaskan diatas pada postingan kali ini saya tidak membaca dan menampilkan melalui tabel pada database karena itu sudah banyak saya jelaskan pada postingan saya sebelumnya. Jadi jika sobat ingin menampilkan gambar berdasarkan data yang ada pada database maka sobat bisa lihat pada postingan saya sebelumnya.
<?php
$images = glob("upload/*.*");
foreach($images as $image){
echo '<div class="col-md-1" align="center" ><img src="' . $image .'" width="100px" height="100px" style="margin-top:15px; padding:8px; border:1px solid #ccc;" /></div>';
}
?>
4. Masih di file index.php selanjutnya kita membuat bootstrap modalnya yang berisi form upload. Cara membuat modalnya sangat mudah karena saya juga banyak membahas tentang ini
<div class="modal fade" id="uploadModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" width="100%">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">Upload Multiple Image</h4>
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
</div>
<!-- Modal body -->
<div class="modal-body">
<form method="post" id="upload_form">
<label>Select Multiple Image</label>
<input class="form-control" type="file" name="images[]" id="select_image" accept="image/*" multiple />
</form>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
5. Selanjutnya masih juga pada file index.php, kali ini kita buat script ajaxnya yang berfungsi untuk action menyimpan gambarnya, kodenya seperti dibawah
<script>
$(document).ready(function(){
$('#select_image').change(function(){
$('#upload_form').submit();
});
$('#upload_form').on('submit', function(e){
e.preventDefault();
$.ajax({
url :"upload.php",
method:"POST",
data:new FormData(this),
contentType:false,
processData:false,
success:function(data){
$('#select_image').val('');
$('#uploadModal').modal('hide');
$('#gallery').html(data);
}
})
});
});
</script>
6. Seperti yang bisa sobat lihat pada step nomor 5, kita membutuhkan file uplaod.php untuk menyimpan action simpan gambarnya. Oleh karena itu sobat perlu membuat file upload.php dan isikan dengan kode dibawah ini
<?php
include 'koneksi.php';
$output = '';
if(is_array($_FILES)) {
foreach($_FILES['images']['name'] as $name => $value){
$file_name = explode(".", $_FILES['images']['name'][$name]);
$allowed_extension = array("jpg", "jpeg", "png", "gif");
if(in_array($file_name[1], $allowed_extension)){
$new_name = rand() . '.'. $file_name[1];
$sourcePath = $_FILES["images"]["tmp_name"][$name];
$targetPath = "upload/".$new_name;
move_uploaded_file($sourcePath, $targetPath);
$query = "INSERT INTO tbl_upload (nama_file) VALUES (?)";
$dewan1 = $db1->prepare($query);
$dewan1->bind_param("s", $new_name);
$dewan1->execute();
}
}
$images = glob("upload/*.*");
foreach($images as $image){
$output .= '<div class="col-md-1" align="center" ><img src="' . $image .'" width="100px" height="100px" style="margin-top:15px; padding:8px; border:1px solid #ccc;" /></div>';
}
echo $output;
}
?>
7. Jika sudah jadi maka akan menjadi seperti gambar dibawah
Jika sobat mengikuti langkah-langkah diatas dengan benar seharusnya akan jadi tanpa kendala. Sekian postingan saya tentang Cara Membuat Upload Multiple Image dengan Ajax dan Bootstrap Modal. Jika ada salah kata saya mohon maaf dan jika ada pertanyaan silahkan tinggalkan pada kolom komentar dibawah.
Jika sobat ingin mendownload tutorial diatas maka sobat bisa klik link dibawah ini :