Cara Membuat Fitur Drag And Drop File Upload Dengan Php Dan Jquery

Mengimplementasikan fitur drag and drop file upload pada website memang tidak mudah, terlebih lagi jika Anda menggunakan bahasa pemrograman PHP dan JQuery. Tapi, jangan khawatir. Artikel ini akan memberikan solusi bagi Anda yang sedang mencari cara terbaik untuk membuat fitur drag and drop file upload dengan PHP dan JQuery. Jika Anda sedang mencari cara membuat fitur drag and drop file upload dengan PHP dan JQuery, maka artikel ini adalah jawabannya. Baca artikel ini sampai selesai untuk mengetahui cara membuat fitur drag and drop file upload dengan PHP dan JQuery dengan mudah dan cepat!

Cara Membuat Fitur Drag And Drop File Upload Dengan Php Dan Jquery

Membuat fitur drag and drop file upload dengan php dan jquery merupakan salah satu cara yang paling mudah untuk mengunggah file atau gambar dengan php dan jquery. Fitur ini memungkinkan pengguna untuk dengan mudah mengakses dan mengunggah file atau gambar hanya dengan menyeret dan menjatuhkan file yang diinginkan ke dalam area file upload.

Pertama-tama, Anda harus menyiapkan file-file berikut:

• File index.html
• File script.js
• File upload.php
• Plugin jquery-ui.js
• Plugin jquery.filedrop.js

Untuk membuat fitur drag and drop file upload dengan php dan jquery, mulailah dengan membuat sebuah form HTML di file index.html yang akan digunakan untuk mengunggah file atau gambar.

Kode HTML

Berikut ini adalah kode HTML yang dapat Anda gunakan untuk membuat form upload:

<form action=upload.php method=post enctype=multipart/form-data>  <div id=drop_zone>    Drop files here  </div>  <input type=submit value=Upload></form>

Kode Javascript

Selanjutnya, Anda dapat menambahkan kode javascript ke file script.js untuk mengatur fungsi drag and drop file upload. Berikut ini adalah kode javascript yang dapat Anda gunakan untuk membuat fitur drag and drop file upload:

$(document).ready(function(){  var dropZone = $('#drop_zone');  dropZone.on('dragover', function() {    $(this).addClass('hover');  });  dropZone.on('dragleave', function() {    $(this).removeClass('hover');  });  dropZone.on('drop', function(e) {    e.preventDefault();    $(this).removeClass('hover');    var files = e.originalEvent.dataTransfer.files;    processFiles(files);  });});

Kode javascript di atas akan menangani berbagai hal yang berkaitan dengan pengunggahan file. Fungsi ini akan mengatur event drag and drop, menghapus kelas hover yang ditambahkan ketika file dijatuhkan, dan memproses file yang diunggah.

Kode PHP

Untuk memproses file yang diunggah, Anda dapat menggunakan kode php di file upload.php. Berikut ini adalah kode php yang dapat Anda gunakan untuk mengunggah file:

<?php  // Get the uploaded file information  $name_of_uploaded_file =     basename($_FILES['uploaded_file']['name']);  // get the file extension of the file  $type_of_uploaded_file =     substr($name_of_uploaded_file,     strrpos($name_of_uploaded_file, '.') + 1);  $size_of_uploaded_file =    $_FILES[uploaded_file][size]/1024;//size in KBs  // Settings  $max_allowed_file_size = 100; // size in KB  $allowed_extensions = array(jpg, jpeg, gif, bmp);  // Validations  if($size_of_uploaded_file > $max_allowed_file_size )  {    $errors .= \n Size of file should be less than $max_allowed_file_size;  }  //check whether file is in allowed extensions  $allowed_ext = false;  for($i=0; $i
Kode di atas akan mengatur semua validasi yang perlu dilakukan sebelum mengunggah file, seperti ukuran file, tipe file, dan lainnya.  
Plugin Jquery
Untuk membuat fitur drag and drop file upload dengan php dan jquery, Anda juga dapat menggunakan plugin jquery, seperti jquery-ui.js dan jquery.filedrop.js. Plugin ini akan membantu Anda dalam membuat fitur drag and drop dengan php dan jquery. Untuk mendownload plugin ini, Anda dapat mengunjungi situs resmi jqueryui.com dan github.com/weixiyen/jquery-filedrop. 
Video Drag and drop files to upload using PHP & JQuery JS
Source: CHANNET YOUTUBE Rathorji

Semoga artikel ini membantu Anda dalam membuat fitur Drag and Drop File Upload dengan PHP dan jQuery. Akhir kata, jangan lupa untuk terus belajar dan mencoba hal baru agar Anda bisa mengembangkan fitur-fitur modern dan membuat website yang lebih kuat.

Cara Membuat Fitur Drag And Drop File Upload Dengan PHP Dan Jquery

Bagaimana cara membuat fitur drag and drop file upload dengan PHP dan jQuery?


Untuk membuat fitur drag and drop file upload dengan PHP dan jQuery, Anda harus mengikuti langkah-langkah berikut:

Buat file HTML dengan elemen div untuk menampung file yang akan diunggah.
Buat file PHP untuk menangani file yang diunggah.
Buat file JavaScript untuk mengatur interaksi antara elemen HTML dan file PHP.
Konfigurasikan file PHP untuk menangani file yang diunggah.





Demikian yang dapat kami share kepada sobat source code aplikasi pada kesempatan ini, semoga dapat bermanfaat dan bisa menjadi referensi pemrograman bagi anda. Jangan lupa like  Fan Page  kami, dan SUBSCRIBE Channel Youtube kami untuk dapatkan update source code aplikasi terbaru.