Dropzone js kütüphanesi Nedir kısaca açıklayacak olursak. Web siteleri için kullanılabilecek çoklu resim yükleme işlemi yapabileceğiniz javascript eklentisidir. Çoklu resim yükleme işlemlerini sitenizde kullanmak istiyorsanız bu eklenti tam size göre. Bu kütüphane sayesinde çoklu resim yükleme işlemlerini oldukça kolay bir şekilde yapabilmeniz için ne yapmanız gerektiğini en basit ve çalışan kodlarla anlatmaya çalıştım.
Öncelikle kütüphanenin web sitesi olan https://www.dropzonejs.com/ adresine girip bizim için gerekli olan dosyaları sitemize entegre etmemiz gerekmektedir. Siteye giriş yaptığımızda ilk yapmamız gereken java dosyasını edinmek. dropzone.js dosyasını siteden alıyoruz. Sitemizin etiketleri arasına ekliyoruz. Burada dosyayı alt klasöre atabilirsiniz fakat ben en basit halinin kök dizine atıp link verdiğim kodunu ekleyeyim.
<script src="dropzone.js"></script>Ayrıca jquery dosyasına da ihtiyaç duyacağından dolayı onu da sitemize entegre etmemiz gerekmekte. code.jquery.com jquery sitesinden gerekli olan js dosyasını da edindikten sonra yine resim yüklemede kullanacağımız sayfamıza ekliyoruz.
<script src="jquery-3.4.1.min.js"></script>
Yine bu kütüphane için gerekli olan dropzone.min.css dosyasını edinip sitemize ekliyoruz. Vereceğim linkte gerekli olan bu dosyayı da bulabilirsiniz.
<link rel="stylesheet" href="dropzone/dist/min/dropzone.min.css">
kütüphane için gerekli olan eklentileri ekledikten sonra form bölümünü yapmalıyız. Bu eklentinin en güzel özelliklerinden biri de çok sade bir form yapısı ile çalışıyor olması. Form kodları ise şu şekildedir.
<form class="dropzone" action="upload.php" method="post"></form>
Bütün bu kodların bir html dosyasında olacak şekilde “upload.html” bir dosya oluşturuyoruz.
<html>
<head>
<meta charset="utf-8" />
<title>Başlıksız Belge</title>
<script src="dropzone.js"></script>
<script src="jquery-3.4.1.min.js"></script>
<link href="dropzone.min.css" rel="stylesheet" />
</head>
<body>
<form method="post" action="upload.php" class="dropzone"></form>
</body>
</html>
Bu sayfayı oluşturduktan sonra form bölümünde belirttiğimiz dosyaların yükleme işlemini yapacak olan upload.php dosyasını oluşturmakta. Onun örnek kodları ise aşağıdaki gibi olmalıdır.
<?php
$ds = DIRECTORY_SEPARATOR;
$storeFolder = 'img/';
if (!empty($_FILES)) {
$tempFile = $_FILES['file']['tmp_name'];
$targetPath = dirname(__FILE__) . $ds . $storeFolder . $ds;
$targetFile = $targetPath . $_FILES['file']['name'];
move_uploaded_file($tempFile, $targetFile);
}
?>
Bu kodlarla upload.php dosyasını oluşturduktan ve $storeFolder içinde belirtilen klasör yani img klasörünü de açıyoruz resimler bu klasöre gelecek. Çoklu resim yükleme dosyamız artık çalışır hale gelecektir.
Upload.html çalıştırılıp istediğimiz resimleri belirtilen bölüme sürükleyip bıraktığımız zaman sırası ile resimleri belirtilen klasöre yükleme işlemi gerçekleştiğini göreceksiniz. Kullanımı bu kadar kolay umarın anlatım karmaşık olmamıştır.