Merhabalar, bugün dropzone.js ile dosyalarımızı sürükle bırak yötemiyle klasöre göndermeyi göreceğiz. Fazla uzatmadan yazımıza geçelim.
Dropzone Js Nedir?
Dropzone Js birden fazla dosyayı sürükle bırak yöntemi ile belirtilen bir klasöre yüklememizi sağlayan açık kaynaklı bir javascript eklentisidir.
dropzone.js PHP ile nasıl kullanılır?
Sizlerden dropzoneJS kütüphanesine girip kodları indirmenizi istemeyeceğim ve direk ben vereceğim kodları.
Bu linke tıklayarak dropzone.min.css ve dropzone.min.js dosylarını indirin.
Yukarıda ki dosya yapısını sizde oluşturun. dropzone.min.css ve dropzone.min.js dosylarını assets/ kalsörünün içine atın.
index.php Kodları
Head kısmına dropzone.min.css dosyamızı dahil edelim.
<link rel="stylesheet" href="assets/dropzone.min.css" type="text/css" />
Body üst kısmına dropzone.min.js dosyamızı dahil edelim.
<script src="assets/dropzone.min.js"></script>
Dopzone kütüphanemizi başarılı bir şekilde projemize dahil ettik.
Şimdiyse images klasörünün içindeki dosyaları index.php dosyamızda görüntüleyebilmek için <body></body> etiketleri kısmına PHP kodlarımızı yazalım.
<?php
$klasor = opendir('images');
while($dosya = readdir($klasor))
if (!is_dir($dosya)) { ?>
<img src="images/<?= $dosya ?>" width="10%">
<?php } ?>
artık images içine yükleyeceğimiz dosyaları anasayfamızda görebileceğiz.
Şimdiyse dosya yükleme aksiyonumuza geçelim. Aynı şekilde <body></body> etiketleri kısmına dosya yükleme formumuzu oluşturalım.
<form action="upload.php" submit class="dropzone" style="border: 2px dashed #e3ebf6;margin-bottom:20px;"></form>
İşlemler tamam, şimdi test edelim.
Umarım yazım size yardımcı olmuştur. Beni dinlediğiniz için teşekkür ederim. Ayrıca PHP ileri tarih İşlemleri ve Kontrol adlı yazımıza da göz atabilirsiniz.
Yorumlar (1)
-
-
xD Tabi sileriz hocam. Uyarı "Uygulamayı deneyen arkadaşlar özel hayatlarına dair fotoğraflar yüklemesinler!"
-
abdullah emin 2 yıl önce
Merhaba son eklenen fotoğraf bir ekran görüntüsü içeriyor. Rica etsem Silebilir misiniz? Yanıtla