Sayfa Yenilemeden Dosya Yüklemek (iframe)
Kullanıcı davranışlarına hızlı yanıt verebilen, interaktif, web uygulamaları ajax ile oldukça yaygın hale geldi. Hemen hemen çoğu işlem ajax (bildiğin javascript işte) ile yapılabilse de, sayfa yenilemeden dosya yüklemek pek mümkün değil. Sayfa yenilenmeden dosya yüklemek için gizli iframe'ler kullanılmaktadır. Ben de bu işi yapan bir dosya yükleme script'i(betiği) yazdım. Sanki güzel de oldu gibi.
Bu kodun en önemli özelliği, sayfa yenilemeden dosya yüklenmesine izin vermesidir. Yüklenecek dosya sayısını sınırlardırma, yüklemeyi iptal etme, kodun esnekliği gibi şeyler bonustur.
Kodun uygulanması son derece basittir. İki satırda hallediliyor. <input type="file" id="ornek1" name="ornek1" />
<button type="button" onclick="ufObj.send(getById('ornek1'));">Yükle</button>
<script type="text/javascript">
var ufObj=new iframeUploadFile('ufObj','fileprocession.php');
</script>
Yapılması gereken iframeUploadFile sınıfıntan bir adet nesne oluşturmaktır. Oluştururken iki parametre vermemiz gerekiyor. İlki, nesne değişkenin adı, ikincisi ise sunucuda dosyaları alacak php, asp, cart curt dosyasının adıdır ( isterseniz dizin yolunu da belirtebilirsiniz).
Yukarıdaki örnek kodda gösterildiği gibi, yükleme işlemini tetikleyecek butonun veya başka bir elementin onclick olayında, dosyayı send metodu ile gönderiyoruz. Gerisi kodun işi.
Uyarı: Sunucu tarafındaki işlemleri yapacak dosyayı örnek niyetiyle yazdım. Kendi kodunuzu yazabilirsiniz.
Değişken açıklamaları kodun .js kodunun içinde var fakat ben yine bir kaç önemli olanını belirteyim;
| Özellik Adı | İşlevi |
|---|---|
| uploadLimit | Yüklenebilecek dosya adetini belirtir. |
| uploadCount | Yüklenmiş dosya adetini belirtir. Kayıt düzenleme formları oluşturulurken, daha önceden kaç adet dosya yüklenmiş olduğunu, bu özelliğin değerini değiştirerek belirtebilirsiniz. |
| flist | Yüklenmiş dosyaların listesidir. Eğer siz bir atama yapmazsanız, kod, bir liste oluşturacak ve seçim kutusunun içinde bulunduğu katmana bu listeyi ekleyecektir. |
| varName | Sınıftan alınan nesneyi saklayan değişkenin adıdır. Değiştirmenize çoğu durumda gerek duyulmaz. |
| loadingImg | yükleme işleminin halen devam ettiğini ifade edecek grafik dosyasının barındırır. |
| url | gönderilen dosyaları sunucu tarafndan karşılayacak dosyanın(.php, .asp vb...) adresini tutar. |
Çalışır halini görmek için: DEMO iframeUploadFile
İndirmek için: DOWNLOAD iframeUploadFile
Lisans işine gelince; bu uygulama bir lisansa sahip değil, nasıl istersen öyle kullan.
Bana bir teşekkür etmene de gerek yok fakat kodun açıklarını veya tavsiyelerini belirtirsen sevinirim.
Merhabalar.
Örneği inceledim, güzel bir uygulama olmuş. Demo uygulamasının olması da güzel olmuş.
Teşekkürler.
Mustafa Bey merhaba; geri dönüp dönemeyeceğinizi bilmiyorum ama http://cookingthecode.com/a17_Sayfa-Yenilemeden-Dosya-Yuklemek- adresindeyayınladığınız scriptle ilgili olarak yazıyorum. Öncelikle çok teşekkürler emekleriniz için. Hemen soruma daha doğrusu sorularıma geçeyim. Localde ve birkaç gün boyunca sunucuda (windows tabanlı) sorunsuz çalıştırdığım bu script artık sunucuda çalışmaz oldu. Sunucudan bir geri dönüş de alamadığımdan muhtemelen bir takım konfigürasyonlarda değişiklikler yapmış olmalarına bağlıyorum sorunu. Sorun şu şekilde; resmi seçiyorum fakat alttakli yükleme gif'i hiçbir hata üretmeksizin dönüp durmaya devam ediyor. Resim de yüklenmiyor tabii. Olası çözüm yolları, script içerisine ekleyebileceğim birtakım iniset durumları vs hakkında bir öneriniz olabilir mi diye merak ettim.
Bir de fazla olmayacaksam, resmi sunucuya yükledikten sonra orijinal dosya adının hemen başına benim dilediğim standart bir metni de ekleyebilse script, bunun için ne tür bir eklenti yapılabilir koda sormak istedim. Scripti henüz yayın yapan bir yerde kullanmıyorum kullanırsam sizi de adresten mutlaka bilgilendiririm. Şimdiden ilginiz için teşekkür ederim.
Evet aynı sorun bendede oluyor. Asp ile yaptım upload kısmını ama yükleniyor resmi sürekli ekranda ve hiç gitmiyor. Sil butonu aktif olmuyor daha doğrusu. Sorun nedir acaba ?
Teşekkürler.
Aslında yerel veya sunucuda çalışması betik açısından pek de önemli değil. Nasıl olsa betik, istemci tarafından çalışır. Eğer bir sorun varsa, bu sorun büyük ihtimalle dosyaları karşılayan php veya asp kodundadır. Ben sadece örnek olması amacıyla dosyaları karşılayan filprocession.php dosyasını yazdım. Sizinki farklı olabilir.
fileprocession.php içindeki 'class uploadMng' satırından önce;
------------------------------------
if(isset($_FILES['ornek1']))
{
file_put_contents('log.txt','dosya geliyor. demek ki buraya kadar bir poblem yok.');
}
else
{
file_put_contents('log.txt','dosya yok. sorun js kısmında. adresleri ve form elementlerinin name özelliklerini bir kontrol edin.');
}
------------------------------------
bu kodu yazın ve dosyanın gelip gelmediğini kontrol edin. bu kontrol kodu, kodun çalıştığı dizinde 'log.txt' isimli bir dosya oluşturup bize bilgi verecektir. Böylece hatanın js den mi php/asp den mi kaynaklandığını öğrenebiliriz. Eğer dosya geliyr fakat bundan sonra sorunlar devam ediyorsa, sanırım pek yardımcı olamayacağım. Ama sunucuda safe_mod'un aktif olup olmadığını öğrenin, dizinlerin yazma izinlerini ve maksimum dosya yükleme büyüklüğünü kontrol edin. bunların dışında bir problemin olacağını zannetmiyorum, oluyorsa da size özel bir durumdur.
Yüklenen dosyaların isimlerine önek vermek için, php dosyasındaki,
echo '<p id="uploadMsg">1</p><p id="newName">'.$_FILES['ornek1']['name'].'</p>';
satırını
echo '<p id="uploadMsg">1</p><p id="newName">OSMANCAN'.$_FILES['ornek1']['name'].'</p>'; bu şekilde değiştirebilirsiniz.
Bu yeni satır, her dosyanın başına OSMANCAN ekleyecektir. Eğer bu öneklerin diskte de uygulanmasını istiyorsanız, şu satırı,
if(is_uploaded_file($file['tmp_name']) && move_uploaded_file($file['tmp_name'],$dir.$file['name'])) return true;
şununla değiştirin,
if(is_uploaded_file($file['tmp_name']) && move_uploaded_file($file['tmp_name'],$dir.'OSMANCAN'.$file['name'])) return true;
artık diske dosyalar önek ile kaydedilmeye başlayacaktır. Burada önek OSMANCAN'dır.