Programlama

Dropzone Nedir , Nasıl Kullanılır Basit Uygulama Örneği

Dropzone Nedir ?

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 java script 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.

Dropzone JS Kütüphanesi Nasıl Kullanılır ?

Ö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 <head> </head> 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. Adres https://www.nedir-bu.com/wp-content/litespeed/localres/cdnjs.com/libraries/dropzone

<link href=”dropzone/dist/min/dropzone.min.css” rel=”stylesheet”>

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 method=”post” action=”upload.php” class=”dropzone”></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>
Dropzone-JS-Kütüphanesi-Nasıl-Kullanılır
Dropzone-JS-Kütüphanesi-Nasıl-Kullanılır

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.

Çok ayrıntıya girmeden kısaca anlatıp çalışır versiyonunu deneyerek kodlarını siteme ekledim sizinde işinize yarayacağını düşünüyorum. Dropzone nedir , ne işe yarar konulu yazımız umarım faydalı olmuştur.

 

İLGİNİZİ ÇEKEBİLİR:  Bootstrap 4 Carousel Nedir , Slider Nasıl Yapılır ?

İlgili Makaleler

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Başa dön tuşu