Multiple upload dengan php dan dropzone.js
Wednesday 5 December 2018
Edit
Multiple upload dengan php dan dropzone.js
Pada kesempatan kali ini saya akan membrikan tutorial singkat membuat Multiple upload dengan php dan dropzone.js, pada tutorial sebelumnya saya sudah membuat tutorial tentang Upload image dan menyimpanya ke databse mysql dengan php, pada tutorial tersebut hanya bisa upload image satu persatu, tidak bisa upload image secara multiple upload.
Multiple upload bisa di gunakan untukpenyimpanan data internal misalnya, atau lampiran file untuk keperluan anda, selain memudahkan multiple upload dengan dropzone JS juga memiliki tampilan yang menarik.
Untuk memulai membuat multiple upload dengan dropzone.js pastikan anda sudah mendownload file dropzone js di website nya https://www.dropzonejs.com, bila sudah di download langkah selanjutnya adalah membuat folder dengan nama dropzone di direktori c:/xampp/htdocs/.
Semuanya sudah siap, mari kita mulai tutorialnya, pertama silahkan copas kode di bawah ini, simpan dengan nama index.php ke direktori c:/xampp/htdocs/dropzone
<html>
<head>
<title>Multiple upload image | www.hakkoblogs.com</title>
<script src="https://rawgit.com/enyo/dropzone/master/dist/dropzone.js"></script>
<link rel="stylesheet" href="https://rawgit.com/enyo/dropzone/master/dist/dropzone.css">
</head>
<body>
<!-- 3 -->
<form action="upload.php" method="post" class="dropzone" enctype="multipart/form-data">
</form>
</form>
<script>
$(“.dropzone”).dropzone({
init: function() {
this.on(“success”, function(file) {
var ext = checkFileExt(file.name);
var newimage = “”;
// Check extension
if(ext != ‘png’ && ext != ‘jpg’ && ext != ‘jpeg’){
newimage = “upload/logo.jpg”;
}
this.createThumbnailFromUrl(file, newimage);
});
}
});
// Get file extension
function checkFileExt(filename){
filename = filename.toLowerCase();
return filename.split(‘.’).pop();
}
</script>
</body>
</html>
Selanjutnya silahkan anda buat folder dengan nama upload di direktori c:/xampp/htdocs/dropzone, folder tersebut untuk menyimpan data hasil upload file yang anda lakukan.
Kemudian copas code dibawah ini dan simpan dengan nama upload.php di direktori c:/xampp/htdocs/dropzone,
connect_error) {
// die("Connection failed: " . $db->connect_error);
// }
$target_dir = "upload/";
$target_file = $target_dir . basename($_FILES["file"]["name"]);
if (move_uploaded_file($_FILES["file"]["tmp_name"], $target_dir.$_FILES['file']['name'])) {
$status = 1;
//$insert = $db->query("INSERT INTO files (file_name, uploaded_on) VALUES ('".$fileName."', NOW())");
}
file upload.php berfungsi untuk mengeksekusi file yang di upload dan menyimpan nya ke folder upload yang sudah di buat sebelumnya.
Selanjutnya kita uji coba, silahkan akses di webrowser dengan mengetikan localhost/dropzone, maka akan muncul tampilan seperti di bawah ini
Klik untuk upload file/gambar/video seperti gambar di bawah ini
Untuk memastikan file yang di upload tersimpan di folder upload yang sudah di buat maka saya lakukan pengecekan di folder tersebut.
Sampai tahap ini kita berhasil membuat multiple upload dengan php dan dropzone.js, bagaimana mudah bukan.? atau masih bingung.? tenang saya sudah menyiapkan source code untuk anda download dan anda pelajari, anda bisa mempelajari kode nya dengan ATM (amati, tiru, modifikasi), silahkan download di sini
Silahkan di coba dan dipelajari, semoga yang saya share ini bisa bermanfaat untuk anda yang sedang ingin membuat multiple upload, maju terus putra putri indonesia, terus tebarkan ilmu karena sebaik baik ilmu adalah yang bermanfaat, semoga tutorial ini bisa memberikan pencerahan bagi anda.
Happy Coding & Programming