Cara Membuat Drag and Drop Upload Dengan jQuery Dropzone

Cara Membuat Drag and Drop Upload Dengan jQuery - Kali ini kita akan belajar membuat upload file Drag and Drop dengan jQuery, Drag and drop upload memungkinkan anda untuk mengupload file dengan cara mendrag sebuah file kemudian mendropnya di area yang telah disediakan. Dengan fitur ini mempercepat proses upload file yang berjumlah banyak, bahkan dengan fitur ini anda tidak perlu drag and drop satu persatu filenya anda dapat langsung menyeleksi file anda kemudian drop di area upload file.

Untuk menulisakan script anda dapat menggunakan apa saja bebas, contoh : Notepad, Notepad++, Dreamwaver, NetBeans, Eclipse.

Dropzone

Pertama buatlah sebuah folder dengan nama drag_drop di dalam webserver anda.

Untuk mempermudah kita gunakan library khusus untuk upload Drag and drop yaitu Dropzone.js download dropzone file di sini : DOWNLOAD

Download juga style dropzpnenya di sini : DOWNLOAD ( Ctrl + S )

Simpan keduanya dalam folder drag_drop

Style

Sekarang untuk style tampilan halamannya buatlah sebuah file CSS baru dalam folder drag_drop dengan nama style.css dengan isi script :

<style>
 *{
  margin: 0;
        padding: 0;
    }
 a{
  text-decoration: none;
        color: #333;
    }
    body {
        text-align:center;
        background-color:#61b3de;
        font-family:Arial, Helvetica, sans-serif;
  font-size:80%;
  color:#666;
 }
 .wrap {
  background: #f3f8fb;
        width:730px;
  margin:30px auto;
  border: 4px dashed #61b3de;
  border-radius:4px;
  padding: 20px 5px;
 }
 h1 {
 font-family:Georgia, "Times New Roman", Times, serif;
 font-size:170%;
 color:#fff;
 font-style:italic;
 text-decoration:none;
 font-weight:100;
 padding: 10px;
 }
</style>

PHP

Sekarang untuk upload filenya buatlah sebuah file PHP baru dalam folder drag_drop dengan nama file-upload.php dengan isi script :

<?php
$upload_dir = 'uploads';
if (!empty($_FILES)) 
{ 
  $tempFile = $_FILES['file']['tmp_name'];//this is temporary server location
  
  // using DIRECTORY_SEPARATOR constant is a good practice, it makes your code portable.
  $uploadPath = dirname( __FILE__ ) . DIRECTORY_SEPARATOR . $upload_dir . DIRECTORY_SEPARATOR;
  
  // Adding timestamp with image's name so that files with same name can be uploaded easily.
  $mainFile = $uploadPath.time().'-'. $_FILES['file']['name'];
  
  move_uploaded_file($tempFile,$mainFile);
}
?>

HTML

Terakhir untuk markupnya buatlah sebuah file HTML di dalam folder drag_drop dengan nama index.html dengan isi script :

<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Drag and Drop Upload Degan jQuery | Jin Toples Programming</title>
  <link rel="stylesheet" href="style.css" />
  <link rel="stylesheet" href="dropzone.css">
  <script src="dropzone.js"></script>

 </head>
 <body>
 <h1>Jin Toples Programming</h1>
    <h1>Drag and Drop Upload Degan jQuery</h1>
 <div class="wrap">
  <form action="file-upload.php" class="dropzone">
    <div class="fallback">
   <input name="file" type="file" multiple />
    </div>
  </form>
 <p class='copy'>Copyright &copy 
<a href="http://www.jintoples.blogspot.com">Jin Toples Programming</a> 2015</p>
 </div>
 </body>
</html>

Drag and Drop Upload Dengan jQuery Dropzone anda sudah selesai anda dapat mencobanya dengan cara membukanya di browser anda, disarankan membukanya dengan browser Chrome atau Mozilla, jangan menggunakan IE Bkakakak.... jika di IE tidak jalan saya sudah tidak heran. silahkan baca tutorial jQuery dan PHP lainnya.

Anda juga dapat mendownload file jadinya di sini : DOWNLOAD