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.