Membuat Upload Gambar Dengan Dropzone.js dan PHP

Hallo teman-teman Dumet School, pada kesempatan kali ini saya akan Membuat Upload Gambar Dengan Dropzone.js dan PHP. Dropzone.js adlaah suatu framework javascript yang berisisebuah library open source untuk event drag dan drop pada file upload dengan preview gambar. Sebelumnya teman-teman boleh kunjungi link dropzone.js  untuk mendapatkan link di bawah ini.

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.1/dropzone.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.1/dropzone.js"></script>

Jika sudah maka teman-teman buat struktur html seperti pada script di bawah.

<!DOCTYPE html>
<html>
 <head>
  <title>Membuat Upload Gambar Dengan Dropzone.js dan PHP</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>       
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.1/dropzone.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.1/dropzone.js"></script>
 </head>
 <body>
  <div class="container py-2">
   <h3 align="center" class="my-2">Membuat Upload Gambar Dengan Dropzone.js dan PHP</h3>
   <form action="upload.php" class="dropzone" id="dropzoneFrom">
   </form>   
   </form>
   <div align="center" class="py-2 mt-2">
    <button type="button" class="btn btn-primary" id="submit-all">Upload</button>
   </div>
   <div id="preview" class="py-2"></div>
  </div>
 </body>
</html>
 

Dan masih di file yang sama teman-teman buat script untuk menjalankan proses upload file menggunakan dropzone.js seperti di bawah ini.

<script>

$(document).ready(function(){
 
 Dropzone.options.dropzoneFrom = {
  autoProcessQueue: false,
  acceptedFiles:".png,.jpg,.gif,.bmp,.jpeg",
  init: function(){
   var submitButton = document.querySelector('#submit-all');
   myDropzone = this;
   submitButton.addEventListener("click", function(){
    myDropzone.processQueue();
   });
   this.on("complete", function(){
    if(this.getQueuedFiles().length == 0 && this.getUploadingFiles().length == 0){
     var _this = this;
     _this.removeAllFiles();
    }
    list_image();
   });
  },
 };

 list_image();

 function list_image(){
  $.ajax({
   url:"upload.php",
   success:function(data){
    $('#preview').html(data);
   }
  });
 }

 $(document).on('click', '.remove_image', function(){
  var name = $(this).attr('id');
  $.ajax({
   url:"upload.php",
   method:"POST",
   data:{name:name},
   success:function(data)
   {
    list_image();
   }
  })
 });
 
});
</script>

Lalu langkah terakhir teman-teman buat file baru dengan nama upload.php untuk menjalankan perintah upload file menggunakan php seperti di bawah ini.

<?php

$folder_name = 'upload/';
if(!empty($_FILES)){
 $temp_file = $_FILES['file']['tmp_name'];
 $location = $folder_name . $_FILES['file']['name'];
 move_uploaded_file($temp_file, $location);
}

if(isset($_POST["name"])){
 $filename = $folder_name.$_POST["name"];
 unlink($filename);
}

$result = array();
$files = scandir('upload');
$output = '<div class="row">';

if(false !== $files){
 foreach($files as $file){
  if('.' !=  $file && '..' != $file){
   $output .= '
   <div class="col-md-2">
    <img src="'.$folder_name.$file.'" class="img-thumbnail" width="175" height="175" style="height:175px;" />
    <button type="button" class="btn btn-link remove_image" id="'.$file.'">Remove</button>
   </div>
   ';
  }
 }
}
$output .= '</div>';
echo $output;

?>

Dan jika teman-teman buka di browser masing-masing. maka akan seperti gambar di bawah.

Membuat Upload Gambar Dengan Dropzone.js dan PHP

Demikian artikel tentang cara Membuat Upload Gambar Dengan Dropzone.js dan PHP. Semoga dapat bermanfaat dan selamat mencoba.

13 Oktober 2019

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Kursus Postgre SQL Database Developer Terbaik 2024 di Jakarta
chat