JS Dropzone ile Dosya Yükleme
JS’nin Dropzone eklentisini genelde çoklu dosya yükleme işlemlerinde kullanıyorum, size de öneririm. Örneğin dosya arşiv sistemi veya fotoğraf video galeri oluşturma gibi bir uygulamada dropzone işinizi çok çok kolaylaştıracaktır.
Eklentinin en güzeli tarafı da sürükle bırak yöntemiyle çalışabilmesi.
Dropzone detaylarını kendi sitesindeki dökümanlardan da inceleyebilirsiniz.
https://www.dropzonejs.com/
Size JS Dropzone eklentisini PHP ile nasıl kullanacağınızı anlatacağım. Makalenin sonunda yaptığım örneği github hesabımdan inceleyebilir veya indirebilirsiniz.
İlk olarak index.html sayfamı oluşturuyorum.
index.html
<!DOCTYPE html>
<html lang="tr">
<meta charset="utf-8">
<title>JS Dropzone Dosya Yükleme Örneği</title>
<head>
<link rel="stylesheet" href="assets/dropzone.css">
</head>
<body style="width: 500px">
<div class="dropzone"></div>
</body>
<script src="assets/jquery-3.5.1.min.js"></script>
<script src="assets/dropzone.js"></script>
</html>jquery 3.5.1, dropzone.js ve dropzone.css dosyalarını index.html içerisine çağırdım.
İsterseniz yeni bir JS dosyası oluşturup vereceğim script’i oraya yazabilirisiniz veya aynı index.html içerisinde <script> </script> etiketleri arasına da yazabilirsiniz.
JS Script
<script>
Dropzone.autoDiscover = false;
$(document).ready(function () {
var _dz = new Dropzone(".dropzone", {
autoProcessQueue: true, // Dosyalar dropzone alanına bırakıldığı anda yüklemeye başlar, false olarak ayarlanırsa bir buton ile tetiklemek gerekir.
parallelUploads: 10, // Aynı anda kaç dosya yüklenecek. Her hangi bir ayar belirtilmezse varsayılan 2'dir.
timeout:0,
dictDefaultMessage:'Yüklemek istediğiniz dosyaları buraya bırakın',
dictFallbackMessage: "Tarayıcınız sürükle bırak yüklemelerini desteklemiyor",
dictFileTooBig: "Dosya boyutu çok büyük ({{filesize}} Mb). Yükleyebileceğiniz en büyük dosya boyutu: {{maxFilesize}} Mb.",
dictInvalidFileType: "Bu tür dosyaları yükleyemezsiniz",
dictResponseError: "Sunucu hatası. Hata kodu : {{statusCode}}",
dictCancelUpload: "Yüklemeyi İptal Et",
dictUploadCanceled: "Yükleme iptal edildi",
dictCancelUploadConfirmation: "Bu yüklemeyip iptal etmek istediğinizden emin misiniz ?",
dictRemoveFile: "Dosyayı Sil",
dictMaxFilesExceeded: "Başka dosya yükleyemezsiniz.",
maxFilesize: 512, // MB
url:'uploadfile.php', // Yükleme işlemini yapacak sunucu dosyası
removedfile: function(file) {
//var name = file.name;
var _ref;
return (_ref = file.previewElement) != null ? _ref.parentNode.removeChild(file.previewElement) : void 0;
},
success: function (file, response, data) {
console.log(file.upload.filename);
console.log(file.size);
_dz.removeFile(file); //Upload edilen dosya dropzone alanından silinir.
},
error: function (file, response) {
file.previewElement.classList.add("dz-error");
}
});
});
</script>Html ve js script tarafımız hazır. Şimdi asıl dosyaları yükleme işlemini yapacak olan PHP dosyasımızı hazırlayalım.
uploadfile.php
<?php
$target_dir = "UploadedFiles/";
if (move_uploaded_file($_FILES["file"]["tmp_name"], $target_dir.$_FILES['file']['name'])) {
$status = 1;
}
?>Bütün işlemler aslında bu kadar. Dosyalar “UploadedFiles” isimli klasör içerine yüklenecektir.
Dropzone için daha sonra bir makale daha yazacağım, o makalede de dropzone ile yüklenen dosyaların isimlerini, boyutlarını veritabanına kayıt etmeyi ve dosyayı yüklerken dosyanın adını değiştirmeyi anlatacağım.
Yorum gönder