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.
bişey öğrenmek istiyorum... adresten gelen id numarasını get ile dosya adı yerine kullanmamız mümkünmü...yani yapmak istediğim dosya adının başına ön ek koyup get ile aldığım id numarasınıda öneke eklemek...
resim_yukle.php?id=33
mesela boyle bir sayfa ilecagirdik bu upload sayfamızı...
get ile id yi alıp önek olan OSMANCAN ile birleştirip OSMANCAN33 yapabilmemiz mümkünmü?
@erkan, evet mümkün.
yukarıdaki verdiğim kod örneğinde şöyle bir satır var.
var ufObj=new iframeUploadFile('ufObj','fileprocession.php');
ikinci parametre, seçilen dosyaların gönderileceği hedef adresi belirtir. buraya 'fileprocesssion.php?id=4&onek=yedeklerim&sonek=falanfilan' gibi bir adres de yazabilirsiniz. böylece, dosyaları yükleyecek sayfaya ek parametreler göndermiş olursunuz.
bu gönderilmiş parametlelerin dosya adlarının önüne ve arkasına nasıl ekleneceğini bir önceki yorumumda belirttim zaten.
kolay gelsin.
Mustafa Bey; İyi Günler
Yazmış oldğunuz kodu kullanmaya çalışıyorum. Takıldığım yerler var.Siz Php örnek yapmışsınız Asp kullandığımdan ve phpden anlamadığım için kodlamamda sorun var sanırım.
1 - Dosya yükleme işlemi tamamlanıyor ve Sil butonu aktif oluyor. Sil butonuna tıklandığında silme bölümüm de dosyayı sildirebilmem için file da gelen veriyi requestle alıp replace ile / leri \\ yaptıryorum. fakat değişken dosya ismimi tutmadıgından(öyle düşünüyorum) silme işlemi gerçekleşmiyor.
2- 1. sorunum halloldu diyelim. Yüklediğimiz dosyaları veritabanına kaydedebilmem için onların bi inputtan okutmam lazım. Bunu nasıl çözebiliriz.
İlgilenirsen sevinirim.
öncelikle tşk ederim katılan herkeze,
ayrıca sizden şöyle bir örnek rica edebilirmiyim.
dosya yüklenirken otomatik isim atanmalı ve db ye kayıt edilmeli.
bunu nasıl salayabilirim.
uzun uzadıya anlatmayıp zamandan kazanmak için örnek de gönderebilirsiniz.
düzgün bir örnekleme yada anlatım bulamadım.
tşk iyi çalışmalar.
Çok kullanışlı bir kod yazmışsınız elinize sağlık. Yaklaşık 3-4 saattir yabancı forumlarda benzer bir kod bulamadım..
Eklenen resimlerin yakında bir yere thumbnail olarak görüntülenmesi de olsa tam aradığım şey olacaktı, bir şekilde onu yaparım umarım. Tekrar elinize sağlık.
bu kodlarda belirttiğiniz üzere işlem yapmaya çalışıyorum ancak
echo '<p id="uploadMsg">1</p><p id="newName">OSMANCAN'.$_FILES['ornek1']['name'].'
bu satırı girdiğimde her hangi bir deişim göremedim kaynak kodlara baktıgımda ise burada <p id= ile başlayan satırların <li class ile başladıgını farkettim ve bu <li class ile başlayan satırı sanırım iframeuploadfile.js de yazdırıyorsunuz ancak ne yaptıysam dosya isimlerini ekrana yazdırırken ön eki yazdıramadım şimdiden teşekkür edeiyorum yardımlarınız için.
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.
diskte dosya ismi deigştirme kısmında sorun yok.
Ama ekrana yazdırırken
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>';
satırla degiştirmeme ragmen degişiklik olmuyor. isterseniz tekrardan bir kontrol edin.n.
Dosya Upload Olduktan Sonra dosyanın yolunu nasıl alırım???
dosya_yol= document.getElementById('iframe').value;
iframe yerine newvalue v.s. yazdı yine olmadı. dosya yolunun yazıldığı nesnenin adı nedir?
yardımcı olursanız sevinirim
bunu bi basit bi iletişim formunda uygulamak istersek
@$_FILES = addslashes($_FILES['ornek1']['name']);
olarak $_FILES\n olarak mı almamız gerekiyor. 3 fotoraf yüklendiğini düşünsek nasıl 3 ünü gösterebiliriiz