Drag Dan Drop File Menggunakan Jquery Ajax dan PHP

Drag dan drop file adalah kegiatan menarik suatu file dari suatu folder ke tempat lain dan bermaksud untuk mensalin file tersebut dan meletakkannya di tempat yang kita tentukan. Dan pada kesempatan kali ini saya akan membuat artikel tentang  Drag Dan Drop File Menggunakan Jquery Ajax dan PHP. Dimana drag dan drop file pada artikel ini yaitu menarik file dari folder ke halaman website yang bermaksud untuk melakukan upload suatu file.

Langkah pertama untuk membuat Drag Dan Drop File Menggunakan Jquery Ajax dan PHP yaitu kita akan membuat terlebih dahulu struktur htmlnya seperti di bawah ini lalu simpan dengan nama index.php.

<!DOCTYPE html> 

 <html> 

      <head> 

           <title>Drag Dan Drop File Menggunakan Jquery Ajax dan PHP</title> 

           <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> 

           <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /> 

           <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 

           <style>

           .container{

                width: 700px !important;

                text-align: center;

           }

           .file_drag_area  { 

                width:600px; 

                padding: 20px;

                border:2px dashed #ccc;  

                text-align:center; 

                font-size:24px; 

           } 

           .file_drag_over{ 

                color:#000; 

                border-color:#000; 

           } 

           </style> 

      </head> 

      <body>             

           <div class="container"> 

                <h3>Drag Dan Drop File Menggunakan Jquery Ajax dan PHP</h3> 

                <div class="file_drag_area"> 

                     Drop File Disini 

                </div>

                <div id="show"></div> 

           </div>  

      </body> 

 </html>

Tampilannya akan seperti di bawah ini.

Dan selanjutnya kita akan membuat script jquery di dalam index.php untuk membuat fungsi drag over atau drag masuk dan drag leave atau drag keluar lalu fungsi drop  untuk mengirim file ke file upload.php untuk di upload dan berikut ini scriptnya.

<script> 

 $(document).ready(function(){ 

      $('.file_drag_area').on('dragover', function(){ 

           $(this).addClass('file_drag_over'); 

           return false; 

      }); 

      $('.file_drag_area').on('dragleave', function(){ 

           $(this).removeClass('file_drag_over'); 

           return false; 

      }); 

      $('.file_drag_area').on('drop', function(e){ 

           e.preventDefault(); 

           $(this).removeClass('file_drag_over'); 

           var formData = new FormData(); 

           var files_list = e.originalEvent.dataTransfer.files; 

           for(var i=0; i<files_list.length; i++) 

           { 

                formData.append('file[]', files_list[i]); 

           }  

           $.ajax({ 

                url:"upload.php", 

                method:"POST", 

                data:formData, 

                contentType:false, 

                cache: false, 

                processData: false, 

                success:function(data){ 

                     $('#show').html(data); 

                } 

           }) 

      }); 

 }); 

 </script> 

Jika sudah maka kita buat file baru dengan nama upload.php untuk melakukan perintah upload file dan teman-teman juga jangan lupa siapkan folder dengan nama upload untuk menampung file yang di upload. Berikut adalah script untuk melakukan upload file dengan php.

<?php  

$output = ''; 

if(isset($_FILES['file']['name'][0])) {  

                foreach($_FILES['file']['name'] as $keys => $values) { 

                                if(move_uploaded_file($_FILES['file']['tmp_name'][$keys], 'upload/' . $values)) { 

                                    $output .= '<div class=col-md-3"><img src="upload/'.$values.'" class="img-responsive" /></div>'; 

                                } 

                } 

echo $output; 

 ?> 

Jika teman-teman drag file, maka jika berhasil akan muncul file di bawah kotak drag seperti gambar di bawah ini.

Demikian artikel tentang  Drag Dan Drop File Menggunakan Jquery Ajax dan PHP. Semoga dapat bermanfaat dan selamat mencoba.

19 Maret 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