Daha  önceleri sitede birçok drag and drop yani sürükle bırak yöntemi ile dosya (resim, zip, rar, müzik, film vs.) örnekleri paylaşmıştık sizlerle. Şu an için düşünüyorumda bütün örnekleri ayrı ayrı başlıklar altında paylaşmak yerine hepsini tek bir başlık altında eklemek  daha mantıklı, ayrıca herkes kendi ihtiyacına göre olan uygulamayı daha kolay bulur.  Bu yüzden bütün örnekleri bu başlık altında toplamaya karar verdim.

Bir tanesi Mootools diğerleri de jQuery için geliştirilmiş olan eklentilerden oluşuyor. Ajax ile dosya atma özelliği hepsinde var Php’ye gelince hepsi olmasa da Php içerik yükleme özelliği olan örnekler de bulunuyor bu sayfada. Zaten Google aramaların büyük çoğunluğu Ajax, Php ve jQuery olarak yapılıyor. Google’de herhangi bir şey ararken acaba aradığımı bulabilecekmiyim diye ister istemez içimizde söylendiğimiz  zamanlar olur. Google’de arama yaptığım zaman karşıma çıkan seçenekleri sürekli yeni sekmede açar, yanlış  çıkmış sonuçları incelemeden kapatırım. Çıkan başlıklar tam aradığımız başlıklar olur ancak karşımıza çıkan içerikler oldukça alakasız sonuçlardır çoğu zaman. Böylelikle sizlerin karşısına  kolay yoldan sürükle bırak dosya yükleme örneklerinin tamamını çıkarmış olacağız.

Şu an için sitedeki bütün yazıları baştan sona düzenlediğim için eklenti ekleyemeyeceğim buraya. İlerleyen zamanlarda düzenleme işi bittikten sonra sanalda olan bu tarz benzer bütün örnekleri sizler için tek bir başlık altında toplamaya gayret göstereceğim. Eh işte  bir teşekkürü eksik etmezsiniz artık.

1- DropZone :

Her türlü içeriği kolayca seçip siteye upload edilmesini sağlayan bir çalışmadır.  Matias Meno‘nun yapmış olduğu  DropZone hem sürükle bırak hemde bilgisayardan toplu seçerek yükleme işlemi yapılabiliyor. Siteye attığınız dosyaların boyutlarına göre bir ilerleme çubuğu görünüyor ve işlem bitince içeriklerin üstünde  “?” işareti ekleniyor

2- jQuery-File-Upload :

Demo sayfasında sadece resimler (jpeg, gif, png formatındaki resimler) ile deneyebilirsiniz diyor ama açıklama kısmında  her türlü (zip, rar, mp3, video vs.) dosya yükleyebileceğinizi  belirtiyor geliştirici. Kendim denemedim ve ne na kadar doğrudur bunu da bunu da bilmiyorum. İndirir saatlerce kurmak için uğraşırsınız sonra neden yanlış bilgi veriyorsun kardeşim dersiniz : ) Bu yüzden peşin peşin anlaşalım, bu açıklamalar demo sayfasında geçiyor. Eğer hakkında anlatılanlar doğruysa bu listedeki örneklerin en gelişmiş olanı bu oluyor. Resim kaydederken istemci tarafından  boyutlandırma, bir sunucudan başka bir sunucuya transfer etme, Adobe flash benzeri herhangi bir tarayıcı eklentisi gerektirmez, görüntü önizleme, PHP, Python, Ruby on Rails, Java, Node.js, Go  sunucu platformlarında da ayrıca kullanılabiliyor.

3- FineUploader :

Daha önceden paylaştığım yazıya baktığımda örneğin eski demosu hatta download adresi tamamen boşaltılmıştı. Neyse ki biraz araştırma yaptıktan sonra yeni linkini bulabildim sizler için. Bir önceki demosu daha iyi gibiydi. Ajax desteği ile içerikleri attığınız zaman dönen loading ikonu karşımıza çıkıyor ve tamamen sunucuya resimler atılana kadar devam ediyordu. Bu sefer biraz değiştirilmiş. Kullanımı hakkında sunucunuza dosyalar yüklemek istiyorsanız eğer tek yapmanız gereken Css ve Js dosyaları sayfanıza eklemek diye anlatılmış. Öyle görünüyor ki kullanımı çocuk oyuncağı gibi bir şey. Kısa yoldan sunucuya içerik atmak diye buna denir. Kendi hazırladığım demo örneklerini ftp yoluyla  sunucuma atıyorum. Dün aklımdan buna benzer bir çalışmayı siteye uyarlamak geçiyordu. Eğer dediği gibi zahmet gerektirmeyen bir uygulama ise  tam bana göredir. Bu aralar yoğunluğumdan dolayı pek birşeyler de yapamıyorum. Demo sayfası için hazırladığım yeni tasarımı bile yüklemeye ve Maykıl temasını dahi bitirmeye fırsat bulamadım. Hazır konu içinde alakasız bir konuya değinmişken bu işlerim biter bitmez en kolay yoldan adım adım WordPress  tema yapımını da yeni bir kategori altında sizlere anlatacağımın müjdesini vereyim.

4- DragZone :

Tamamının jQuery eklentileri olduğunu düşünüyordum ama bu konuda yanılmışım. Kalan son Ajax ve Php ile içerik yükleme örneği Mootools çıktı. Mootools olması bence o kadar da kötü değil. Mootools her ne kadar jQuery gibi tutulmamış olsa bile yüzlerce eklentisi bulunan bir Javascript kütüphanesidir. Bunca zamandan sonra eski yazılara dönüp baktığımda karşılaştığım şey hayal kırıklığı ve şok olmak ta cabası. Bir tane sağlam link kalmamış desem yeridir. Demo linkinin olduğu site kapanmıştı, neyseki download linki hala sağlamdı. Size bir demo göstermek zorunda olduğum için mecburen kendi sunucuma yükledim ve paylaşmadan önce de bir denemesini yaptım çalışıyor mu çalışmıyor mu diye.  Herhangi bir sorun yok ve sorunsuz bir şekilde çalışıyor. Html5 desteği sayesinde drag and drop (sürükle bırak) yöntemi ile masaüstünden mouse ile tuttuğunuz içerikleri sayfaya bıraktığınızda otomatik yükleniyor. Hiç bir kurulum yapmanıza gerek yok, olduğu gibi MooTools DragZone eklentisini kullanabilirsiniz. Demo anasayfası html formatında hazırlanmış olup ilerleme durumu bir swf dosyası ile görüntüleniyor ve upload.php dosyası  sayesinde Php ve Ajax ile içerikleriniz sunucuya atılıyor. Demo sayfasında denediğiniz zaman seçmiş olduğunuz resim video, mp3 tarzı içeriklerin küçük resimleri görünüyor ama hiç bir dosya yüklenmiyor. Sebebi bozuk olması değil tabi ki. Sırf deneme amaçlı yükleyeceğiniz içerikleri teker teker silmemek için bozmak zorunda kaldım. Sonra neden çalışmıyor demeyin 🙂 Son olarak unutmadan buraya eklemiş olduğum resim ile demo sayfasında tasarım aynı değil. Asıl Css dosyalarını bulamadım ve fazla zamanım olmadığından da yeni bir tasarım hazırlayamadım. Bu o mu? O bu mu ? diye soracak olursanız eğer eve bu o ve o da bu. Anlayacağınız yanlış bir resim eklemedim 🙂

Gerçek Css dosyalarını bulamadığım için gerçekten üzgünüm. Birçok özelliği bulunan bu örnekte Html5 yada Html4 desteği olmadan da toplu dosya yüklenmesi en dikkat çekici özelliklerinden bir tanesi. Yüklenecek en az ve en fazla dosya boyutu da ayarlanabiliyor. Diğer örneklerde sanırım bu özelikler bulunmuyordu. Sunucuya atmak istediğiniz içeriklerin anında önizlemesi de ekranda görünüyor. Hostunuza  attığınız içeriklere bir de otomatik ön ek  eklenebiliyor. WordPress kullanıcıları genelde bilirler, veritabanı ayarları yapılırken mysql tablo isimlerinin önünde ön ek olarak wp_ şeklinde bir yazı ekleniyor. Hostunuza attığınız içeriklerin isimleri de 0_resim.jpg, 1_resim2.jpg diye  değişiyor.

5. DmUploader.js