Uploadify Bileşenini Formunuza Ekleyin

Açıkcası dosya upload etmeniz gereken durumlarda dosyaları yakalamanız, isimlendirmeniz ve bunları veritabanına eklemeniz çoğu zaman sıkıcıdır. Herşeyi düşünmeniz gerekir. örneğin birden fazla dosya yüklerken dosyalardan birisi hata verirse onu tekrar yüklemek için kullanıcıya imkan veremeyiz, sadece hata raporu gösterebiliriz.

Bu nedenle dosya yükleme seçeneği olan formlarda genellikle JavaScript ya da Flash kullanılır. Biz örneğimizde JQuery ile çalışan Uploadify eklentisini kullanacağız.

Eklentiyi belirli bir klasör altında kullanmak bizim menfaatimize olacak. Her dosyayı özel klasörler altında tutmaktansa belirli bir klasör açıp onun içine eklemek en mantıklısı. Örneğin “uploadify/” ya da “scripts/uploadify/” şeklinde bulundurmak gerekiyor.

Öncelikle post olayı bu eklentide biraz sıkıntılı. El ile yapılandırmak gerekiyor (ya da ben bulamadım, bilmiyorum).

Sayfamızda jQuery, swfobjects (uploadify için gerekli) ve uploadify JavaScript dosyalarına link vermemiz gerekiyor.

[cc lang=’html4strict’ ]


[/cc]

Sonra bir de form ekleyelim sayfamıza.
[cc lang=’html4strict’ ]

[/cc]

Gelelim JavaScript kodlarımıza. Öncelikle aynı isimli dosya oluşmasını engellemek için dosya isimlerinin başına tarih ekledim. “001.jpg” dosyası şu şekle dönüştü “2011-09-10-15-50-001.jpg”. Böylelikle aynı dosyanın oluşmasını ve üzerine yazılmasını engellemiş oldum.

[cc lang=”JavaScript”]
var d = new Date();
var d_year = d.getFullYear();
var d_month = d.getMonth() + 1;
var d_day = d.getDate();
var d_hour = d.getHours();
var d_min = d.getMinutes();

function checkDateZero(i) {
if (i < 10) { i = '0' + i; } return i; } d_month = checkDateZero(d_month); d_day = checkDateZero(d_day); d_hour = checkDateZero(d_hour); d_min = checkDateZero(d_min); var date_prefix = d_year + '-' + d_month + '-' + d_day + '-' + d_hour + '-' + d_min + '-'; [/cc] Bu kısım biraz karmaşık oldu ama tarih ve saati alıp düzenleyip bunu "date_prefix" değişkenine aktardım. Uploadify kodlarını şu şekilde düzenledim. [cc lang="javascript"] $("#upload_file").uploadify({ 'uploader' : '/uploadify/uploadify.swf', 'script' : '/uploadify/uploadify.php', 'cancelImg' : '/uploadify/cancel.png', 'folder': 'images/', 'method': 'post', 'buttonText': 'DOSYA SEC', 'fileExt' : '*.jpg;*.gif;*.png', 'fileDesc' : 'Resim Dosyaları', 'multi' : true, 'queueSizeLimit' : 6, 'simUploadLimit' : 1, 'sizeLimit' : 1200000, 'removeCompleted' : false, 'scriptData' : { 'file_prefix' : date_prefix }, 'onComplete' : function(event, ID, fileObj, response, data) { $("#etkinlik_gonder").append('‘);
},
‘onAllComplete’ : function(event,data) {
$(“#etkinlik_gonder”).submit();
},
onSelect: function(event,queueID,fileObj){
fileObj.name = date_prefix + fileObj.name;
}
});
[/cc]

Burada scriptData değişkeni ile uploadify.php dosyasına file_prefix değişkenini POST ile gönderdim. bu değişkeni $_POST[‘file_prefix’] ile alıp dosya adımıza ekleyeceğiz.

onComplete olayına her dosya yüklendikten sonra formumuza yeni bir hidden field eklemesini sağladım. Burada da dosya ön eki değişkenini eklemeyi unutmuyoruz.

onSelect olayında fileObj bileşenine ait name değişkenini (yani dosyamızın adını) düzenlemeyi unutmuyoruz.

Son olarak da bütün yüklemeler bittikten sonra formumuzu submit ediyoruz.

Formumuzdaki gönder butonunun onClick ile çalıştırdığı “checkAndUpload()” fonksiyonu ise formumuzu kontrol edip upload işlemini başlattırıyor. Upload işlemi bittikten sonra zaten kodlarımızda form submit ediliyor.

“checkAndUpload()” fonksiyonumuz basitçe şu şekildedir

[cc lang=”javascript”]
function checkAndUpload() {
if ( validateForm() ) {
$(“#upload_file”).uploadifyUpload();
} else {
alert(“Lütfen tüm alanları kontrol ediniz.”);
}
}
[/cc]

öncelikle formumuzdaki verileri doğruluyoruz, sonrasında eksik varsa hata verdiriyoruz, yoksa uploadify için upload komutunu gönderiyoruz.

Son olarak da uploadify.php dosyamızın içeriğini şu şekilde değiştiriyoruz.

[cc lang=”php”]

[/cc]

Özellikle belirtmek isterim ki uploadify.php dosyasında yüklenen dosyaları tekrar kontrol etmekte fayda var. Uploadify’a güvenip doğrudan yüklememek gerekli. Güvenlik tehditi oluşturmaması için bu gerekli. Zaten uploadify’ı yazan kişi de bu şekilde söylüyor.

İyi günler dilerim…