Ajax ve PHP ile upload

Bir süredir upload sistemimiz için bir eklenti arayışı içindeydim. Genelde HTML5 ile geliştirilmiş bir çok uploader mevcut fakat ben biraz daha düşük browser versiyonlarında da kullanılabilmesini tercih ettim (gönülden istedim desem yalan olur). Arayışlarım ve deneme yanılmalarım sonucunda bana en uygun olan uploaderın JSAjaxFileUploader olduğuna karar verdim. Tercih sebebimin en önemli özellikleri kolay entegre edilmesi, flash içermemesi ve multi upload seçeneğinin mevcut olması. Eklentiyi projenize kolaylıkla ekleyerek dilediğiniz gibi özelleştirme yapabilirsiniz. Şimdi biraz örneklerle açıklayalım.

Download Linki : https://github.com/JSEver/JSAjaxFileUploader

Demo Linki : http://jseverdemo.0fees.net/JSAjaxFileUploader/

Yükleme;

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="/path/to/JQuery.JSAjaxFileUploader.js"></script>
<link href="/path/to/JQuery.JSAjaxFileUploader.css" rel="stylesheet" type="text/css" />

Mevcut linkten dosyayı indirdikten sonra paket içerisinden çıkan js, css ve icon dosyalarını projenizdeki dizine yüklemek.

Kullanım;

<div id="testId"></div>

Sistemin çalışacağı div’i (opsiyonel, siz span v.s. gibi html tagları da kullanabilirsiniz) sayfanıza ekleyin.

$('#testId').JSAjaxFileUploader({
      uploadUrl:'uploadImagesAction'
});

Javascript ile daha önce oluşturduğunuz testID isimli div de upload sistemini çağırabilirsiniz.

Özelleştirilebilir bir çok bölüm olduğundan bahsetmiştik. İndirdiğiniz paket içerisinde “Document.html” dosyasından bu bilgilere ulaşabilirsiniz. Kısaca bazı başlıklara değinecek olursak;

allowExt : yüklenebilir dosya uzantılarını tanımlayabileceğiniz bölüm ( gif|jpg|jpeg|png|bmp|mp4|mp3|pdf|doc|docx|xcl|txt )

maxFileSize : maksimum yüklenebilecek dosya boyutunu sınırlandırabileceğiniz bölüm. Sunucunuzun yükleme sınırı ile aynı olmasına dikkat edin.

showProgress : dosyalarınızı yüklerken alt bölümde dosyanın % olarak ne kadarının yüklendiğini görebilirsiniz.

zoomPreview : yüklenen dosyanın (fotoğraf ise) küçük bir resminin basılmasını ve bu resim üzerine fareniz ile geldiğinizde önizleme penceresinin açılmasını sağlar.

beforesend , done , fail , progress , complete , success , error gibi fonksiyonlarlada yükleme öncesi ya da sonrasında dosya(lar) ile ilgili bilgilere ulaşabilirsiniz.

 

 

Levent

Yazılımcıdan bozma tasarımcı

Bir cevap bırakın
Captcha Captcha güncellemek için resime tıkla