DropzoneJS ile Dosya Yükleme İşlemi

  • 29.9.2015
  • tayyipyetis
  • JQuery

dropzonejs kullanımıMerhaba, bu derste ilan siteleri, emlak siteleri, e-ticaret siteleri, blog siteleri vb. web uygulamalarında önemli bir yeri olan file upload işlemini bizim için hem tasarım hem yazılım, konusunda oldukça iyi bir şekilde yapan Dropzonejs plugin''inden bahsedeceğiz. eklentinin resmi sayfasına Buradan ulaşabilirsiniz

VStudio 2012 üzerinde yeni bir web projesi açın. solution''a bir web form ve html sayfası ekleyin. dropzonejs''nin dosyalarına makalenin sonunda linkini verdiğim projeyi indirerek ulaşabilirsiniz dosyaları zıp''den çıkarın. bizim için önemli olan dosyalar css klasörü ve anadizindeki js dosyalarıdır. html''in head tagları arasına şu kodları yazın

<head>
 <title></title>
 <link href="css/basic.css" rel="stylesheet" />
 <link href="css/dropzone.css" rel="stylesheet" />
</head>

Body''nin en alt kısmına aşağıdaki javascript kodlarını yazın ilk iki satır dropzonejs için gerekli olan linkler sonuncusu ise normalde gerekmeyen ama eklenen dosyaları silmek için gereken butonu yerleştiren js kodlarıdır

<script src="dropzone.js" type="text/javascript"/>
<script src="dropzone-amd-module.js" type="text/javascript"/>
<script>
Dropzone.options.mydropzone = {
maxFiles: 5,
init: function () {
this.on("addedfile", function (file) {
var removeButton = Dropzone.createElement("<button>Resmi Sil</button>");
var _this = thiş;
removeButton.addEventListener("click", function (e) {
e.preventDefault();
e.stopPropagation();
_this.removeFile(file)
});
file.previewElement.appendChild(removeButton);
});}};
</script>

Buradan sonra işin en önemli kısmı geliyor. bütün bunlar dropzonejs eklentisini şekillerip çalıştırmak içindir. fakat biz dosyalarımızı upload edeceğimiz alanı nerede ve nasıl kullanacağız ? bu sorunun cevabı aşağıdaki html kodunda. dropzonejs kullanmak için bir form etiketi kullanmanız gerekiyor. fakat bu form sadece bu eklentiye ayrılmalı çünkü site çalıştığında bu formun içi tamamen ayrılmış olacaktır

<form action="Default.aspx" class="dropzone" id="mydropzone">
<div class="fallback">
  <input name="file" type="file" multiple="multiple" />
</div>
</form>

Göründüğü gibi formun attribüte''leri yukarıdaki gibi ayarlanmalı. tüm bunları doğru bir şekilde yaptıktan ve tabii formun post edileceği web formu da oluşturulduktan sonra proje doğru bir şekilde çalışacaktır Örnek ekran görüntüsü aşağıdaki gibidir.

 

 

Örnek projeyi buradan indiriebilirsiniz.  Projeyi indir

Umarım faydalı olmuştur. tekrar görüşmek dileğiyle...

Mustafa Tayyip YETİŞ
Yazılım Geliştirme Uzmanı

Yorum Gönder

Diğer Makaleler

Etiketler