Çok fazla dosya yükleme gereksinimi olan projelerde dropzone.js kullanmanızı öneririm. Örneğin dosya arşiv sistemi ve ya galeri oluşturma gibi projeler de imdadınıza yetişiyor. 10 TB’lik fotoğraf ve videoları arşivlemek için kullandım ve sorunsuz çalıştı.
Asp.net Kullanımını
Sitenin adresinden detaylı kullanım bilgisi alabilirsiniz yalnız Asp.net için anlatım yetersiz. Burayı takip edebilirsiniz. Senaryoyu basite indirgeyip anlatıyorum, dosyalardan tarih ve yer bilgisi alıp veritabanına kayıt edeceğiz. Kayıt için dosyaları ve alınan bilgileri FileUploader.aspx e gönderip veritabanı işlemlerini orada yapacağız.
JS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
<script src="js/dropzone.js"></script> <link href="js/dropzone.css" rel="stylesheet" /> <script type="text/javascript"> $(document).ready(function () { Dropzone.autoDiscover = false; Dropzone.options.myAwesomeDropzone = false; $("#myAwesomeDropzone").dropzone({ uploadMultiple: true, autoProcessQueue: false, addRemoveLinks: true, paramName: "file", maxFilesize: 20000, // MB parallelUploads: 10, clickable: true, maxFiles: 10, autoProcessQueue: false, url : "FileUploader.aspx" }); Dropzone.options.myDropzone = { init: function () { this.on("addedfile", function () { this.removeFile(this.files[0]); }) } }; $('#button').on('click', function (e) { var yer = document.getElementById("<%=txt_Yer.ClientID%>").value; var trh = document.getElementById("<%=txt_Tarih.ClientID%>").value; myAwesomeDropzone.dropzone.options.url = "FileUploader.aspx?tid=<%=Request.QueryString["tid"]%>&trh="+trh+"&yer="+yer myAwesomeDropzone.dropzone.processQueue(); }); }); </script> <style> .dropzone { border: 2px dashed #d3d3d3; } </style> |
HTML
1 2 3 4 |
<div id="myAwesomeDropzone" class="dropzone" style="background-color: #F3F4F5; text-align: center; font-size: 30px; font-family: Arial"> </div> <span id="button" class="btn btn-success btn-outline btn-block"><span class="fa fa-upload fa-5x"></span></span> |
FileUploader.aspx.cs
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { if (Request.QueryString["tid"] != null) { foreach (string s in Request.Files) { HttpPostedFile file = Request.Files[s]; int fileSizeInBytes = file.ContentLength; string fileName = file.FileName; string fileExtension = ""; if (!string.IsNullOrEmpty(fileName)) fileExtension = Path.GetExtension(fileName); string savedFileName = Guid.NewGuid().ToString() + DateTime.Now.Millisecond.ToString() + fileExtension; string fn = Server.MapPath("uploads\\") + savedFileName; DateTime d = DateTime.Now; DateTime.TryParse(Request["trh"], out d); //---- //veritabanı kayıt işlemleri //---- //başarılı ise file.SaveAs(fn); } } } } |
Görüntüler:
Guzel yazi 🖒
Öyle büyük bir arşivde sorun çıkarmadıysa kullanırım ben bunu görselliği de güzel duruyor
Dosya yüklendikten sonra dosyanın o alandan kalkmasını nasıl yapabilirim .
dropzone özelliklerini yazdığımız kodların altına ekleyiniz:
myAwesomeDropzone.dropzone.on(“complete”, function (file) {
myAwesomeDropzone.dropzone.removeFile(file);
});
Teşekkürler oldu 🙂
örneği indirebileceğim bir zip paylaşırmısnız
Özel proje olduğu için paylaşamıyorum. Yalnız kendi sitesinde örnekleri mevcut diye hatırlıyorum.
Merhaba,
MVC de blog ekleme işleminden sonra o blog ile ilgili dosyaları nasıl yükletebilirim. Yani şöyle üye önce blog ekleyecek daha sonra dropzone çalışacak bir türlü bulamadım
İkisini aynı anda yapmanız daha mantıklı değil mi? Blogu ekledikten sonra vazgeçmesi veya düzenlemesi ikinci bir iptal & düzenle mantığı hazırlamanızı gerektirir.
Paylaşımınız için teşekkürler. ben bu dropzone ile upload yaparken dosya ismini değiştirip klasöre atmayı başardım fakat bu dosyanın yeni adını upload yaptığım sayfaya yazdırmayı bir türlü başaramadım. yardımcı olursanız sevinirim.
Backload config dosyasını inceleyiniz. Yanlış hatırlamıyorsam orada file name ayarları vardı. Üzerinden uzun zaman geçtiği için detayları hatırlayamıyorum malesef.
Admin bunu MVC göre nasıl yapabiliriz ?
mvc göre nasıl yapabilriz admin
Javascript aynı kalacak. Url yerine mvc controller apini yazacaksın ve dosyayı yakalayıp kayıt işlemlerini yapacaksın.
Merhaba bu Dropzone mantığını Clasic asp ve access veri tabani ile uygun bir script yapmak mümkünmüdür ?
Evet tabiki yapılabilir. Burda dropzone’nin yaptığı şey dosyayı alıp serverde ki bir klasöre kopyalamak ve klasörün adını bir fonksiyona göndermek. Veritabanı önemli değil çünkü veritabanında sadece dosyanın adını tutuyoruz.