AJAX & JavaScript & DOM & Php yakuter
AJAX’in artık bir çok farklı alanda kullanılabileceğini eburhan‘ın AJAX Ne Gibi Durumlarda Kullanılmalı? başlıklı yazısında gördük. Gelin bunlara bir de AJAX ile sitemize dosya göndermeyi ekleyelim. Bunun nasıl yapıldığını kendi yazmış olduğum AJAX Göndermeç isimli betik ile anlatmaya çalışacağım. Konu hakkında biraz daha ipucu vermek gerekirse AJAX ile dosya göndermenin mümkün olup olmadığını göreceğiz.
AJAX ile dosya göndermenin mantığı
Yukarıda AJAX ile dosya göndermenin mümkün olup olmadığını göreceğimizi söylemiştim. Şimdi de cevabını veriyorum; malesef hayır, yani AJAX ile dosya gönderemiyoruz. Sebebini açıklamak gerekirse, bildiğiniz gibi normal form bilgilerini GET ve POST metodlarıyla gönderiyoruz. Form ile dosya göndereceğimiz zaman da POST metodunu kullanırız ve karşı tarafta da gönderilen dosyanın bilgilerini $_FILES[’…’] değişkeni ile alabiliriz.
AJAX ile dosyayı göndermeye çalıştığımızda ise form normal bir şekilde gönderiliyor gibi görünmektedir fakat alıcı dosyada $_FILES[’…’] değişkeni bir sonuç vermez ve hata ile karşılaşırız. Çünkü kullanmış olduğumuz tarayıcılar malesef güvenlik nedeniyle (özel ayarlar yapılmadığı müddetçe) XmlHttpRequest nesnesi üzerinden dosya göndermeye müsade etmiyor
Peki bir çözümü var mıdır ve varsa nedir? Kısmen de olsa bir çözüm var diyebiliriz; gizli bir iframe kullanmak. Sitemize göndereceğimiz dosyayı seçtikten sonra formumuzu bu iframe’e göndeririz. Ardından AJAX ile dizin listemizi güncelleriz. Kullanıcı sanki tek bir işlem oluyormuş gibi görür yani dosyanın AJAX ile gönderildiğini düşünür. Oysa ki dosyayı gönderen AJAX değil bildiğimiz HTML formu ve iframe‘dir. İnanıyorum ki AJAX Göndermeç‘i açıkladıktan sonra konuyu daha iyi anlayabilirsiniz.
AJAX Göndermeç betiğimiz iki klasör ve 4 adet dosyadan oluşuyor.

Ajax Göndermeç dosyaları
Dosyaları tanıtmaya başlamadan önce şunu söylemeliyim ki sanırım artık dosyaların içini olduğu gibi yazmama gerek yok. Zaten makalenin sonunda indirebileceğiniz bağlantılar bulunuyor. Yazımda sadece kodlarda dikkatinizi çekmek istediğim noktaları belirteceğim.
KLASÖRLER
dosyalar: Sitemizde göndermiş olduğumuz dosyaları barındırdığımız klasör. İsteğinize göre değiştirebilirsiniz. Önemli olan klasörün izninin yani CHMOD ayarının 777 yani yazılabilir olması gerektiği.
eyceks: Bu betiği hazırlarken sitemiz yazarı Erhan Burhan’ın eyceks isimli kütüphanesinin son versiyonu olan 1.3′ten faydalandım. eyceks klasöründe eyceks kütüphanesi (eyceks.js) ile yüklenme esnasında gösterilecek olan resim dosyası (loading.gif) bulunuyor.
Sayfalar: 1 2
Toplamda 14551 kez okunmuş.
Şu an 1 kişi okuyor.
En fazla 7 kişi aynı anda okumuş.
Bugün 0 kez okunmuş.
Etiketler: ajax, javascript, orta, php, upload
Trackback Yorumları takip et Baskı Önizleme

(34 oy, ortalama 4.59)
# Deniz | 28 Şubat 2007, 00:49
Merhaba güzel olmuş şimdi test ettim de bir de dosyayı sil dediğinizde şifre soracak bi admin özelliği eklense sanırm daha güzel olur . İyi çalışmalar elinize sağlık.
# eburhan | 28 Şubat 2007, 11:06
@Deniz
Biz yazıların karmaşıklaşmaması için oldukça basit ve sade bir şekilde yazmaya çalışıyoruz. Evet o dediğiniz yapılabilir fakat bu yazı, ajax ile dosya göndermenin mantığına yoğunlaşmış bir yazıdır. Bu işin nasıl yapıldığını öğrenen birisi bundan sonra her istediğini yapabilir, her istediği özelliği ekleyebilir, script’i istediği gibi geliştirebilir artık.
# grkn | 28 Şubat 2007, 16:26
güzel makale yakuter
teşekkürler bende bunu düşünüyordum aydınlatmış oldun beni
# yakuter | 28 Şubat 2007, 18:18
Beğenmenize sevindim
Aslında bunu geliştirip tam anlamıyla bir dosya yöneticisi yapmak da aklımdan geçmiyor değil
# eburhan | 28 Şubat 2007, 23:39
Erhan aynı şey benim de aklımdan geçiyor
# kara | 28 Şubat 2007, 23:47
Afedersiniz ama iframe kullandıktan sonra bir ajax kütüphanesi ya da bu kadar komplike javascript kullanmanın mantığını çözemedim. Madem bir iframe kullanıyorum, iframe içinde gerçekleşen olaylar neticesinde body onload ile parent frame’de istediğim gibi at koşturabilirim.
# o--d | 01 Mart 2007, 08:45
guzel bir yazı olmuş. Ajax-tr yi ve sizi bilgilerinizi bizimle paylaştığınız için tebrik ve takdir ediyorum.
# yakuter | 01 Mart 2007, 11:56
@kara elbette ki bunu yapabilirsin. Fakat biz parent frame’i yenilemiyoruz. AJAX’i kullandığımız nokta sadece dizin listeleme bölümü. iframe sadece dosyanın gönderildiği form. Bundan başka bir maksadı yok iframe’in.
Tabi şu da olabilir. Bizim AJAX ile dizinin yenilemesini sağladığımız yere bir iframe koyarsın ve oranın yenilenmesini sağlayabilirsin. Artık AJAX veya iframe kullanmak kararı sana kalmış.
Sonuç olarak zaten makalede asıl varmak istediğim nokta, dosya kısmının mecburen iframe veya doğrudan başka bir dosyaya yönlenmek zorunda kaldığı, diğer olayları dilediğiniz teknolojiyle yapabileceğinizdi. Anlaşılmışsa ne mutlu bana
# kara | 01 Mart 2007, 23:13
parent frame’i yenilemeniz gerekmiyor. parent frame’den fonksiyon çağırabilirsiniz. XMLHttpObject yokken kullanıyorduk zaten bu tip atraksiyonları. Benim demek istediğim bu yazdığınız uygulama için ajax kullanmaya gerek yok.
body onload=”window.parent.guncelle(’yenidosya.zip’);”
şeklinde ana pencereden fonksiyon çağırabiliyorsunuz. Dolayısıyla ajaxa gerek kalmıyor. Umarım ben de anlatabilmişimdir meramımı.
# AhmetK | 01 Mart 2007, 23:20
Bu scriptin ASP kodları ile çalışanı da yapılabilir. Yapan varsa inceleyebiliriz. Güzel bir çalışma olmuş. Bilginize sağlık.
# yakuter | 02 Mart 2007, 08:11
@kara aslında ikimiz de aynı şeyleri söylüyoruz yani dediğin gibi bunu yapabilmek için “AJAX olmasa da olur” fakat benim amacım “Peki AJAX ile nasıl yapılır?” sorusuna cevap vermekti. Makalemde de AJAX ile dosya göndermenin mümkün olmadığını, sadece Göndermeç’teki gibi bir dizin yenileme işlemi yapabileceğimizi açıklamaya çalıştım.
Sanırım bu sefer düşündüklerimi açıklayabildim
@AhmetK dediğinde haklısın. ASP ile de bu örnekleri sunmalıyız fakat malesef sitenin şuan ki örnek hazırlayan yazarları hep PHP programcıları. Yani ciddi bir ASP bilen yazar ihtiyacımız var. Bu nedenle bir kaç yer ile görüşmekteyiz. İnşallah dilediğimiz gibi biri aramıza katılır…
# Orhan | 03 Mart 2007, 01:23
Peki bir progress bar için ne yapmamız gerekiyor? XMLHttpObject nesnesinden dosyanın kaç byte’ının transfer edildiği gibi bir bilgi dönüyor mu?
# yakuter | 13 Mart 2007, 08:50
@Orhan, kusura bakma geç cevap yazıyorum. Nasıl olduysa bu yorum gözümden kaçmış. Aslında progress bar konusunda haklısın. Bilmek gerekli fakat ben de hiç düşünmemiştim nasıl yapılacağını
Aslında aklımda bir iki teknik var işe yarayabileceğini düşündüğüm. Bir deneyeyim, olursa söylerim kısaca
# mutkan | 15 Mart 2007, 23:47
evt ya, progress bar olursa tam super olcak
# mutkan | 16 Mart 2007, 00:06
kurdum ve cok guzel calisiyo, ellerine saglik, fakat bir sorum olacakti. Ben dosyalara sadece root un erismesini istiyorum. Burda dosyalar/bilmem.jpg yazinca dosya download edilebiliyor. Dosyalar kismina erisimi nasil kisitlayabiliriz. Tesekkurler..
# Burak | 17 Mart 2007, 23:57
@orhan, @yakuter, @mutkan: Progress bar için iframe’de dosya upload edilirken başlangıçta tetiklenen bir periyodik xmlhttp sorgusu ile sunucudan upload edilen miktar bilgisi alınabilir. Php için sunucuda filesize() komutu ile geçici dosyanın boyutu döndürülebilir. Gerisi tamamen hayalgücünüze kalmış
Boş bir zamanımda örnek bir kod yazıp burada yayınlamayı isterim.
# orhan | 18 Mart 2007, 17:24
canım benim işte bu
Bu kadarı bile yeter gerisi için…
Web de birkaç örneğe rastladım fakat onlarda PHP+PERL ile birşeyler yapmışlar o yüzden pek bişey anlamadım ama bunu bir denemek lazım tabi…
# yakuter | 18 Mart 2007, 22:26
@burak dediğin oldukça mantıklı ve yapılabilir. Hiç bu açıdan düşünmemiştim
Teşekkür ederim bizi aydınlattığın için
# frosten | 20 Mart 2007, 17:46
peki ben bu işi asp.net ile yapmak istiyorsam?
# Vokan Özçelik | 23 Mart 2007, 07:18
Makale için teşekkürler.
Güncel olarak üretim ortamında da kullanılan bir teknik bu.
Örneğin Gmail çaktırmadan e-posta ile beraber eklenti dosyalar gönderirken aynı tekniği kullanıyor.
Hatta meraklısına bir ara gmail uygulaması çalışırken gelip giden requestleri bir sniff edin diyebilirim (tercihen firebug ile). Orjinal şeylere rastlayabiliyorsunuz
Sevgiler.
# eburhan | 23 Mart 2007, 09:07
@Volkan
Dediğin gibi Gmail dosya eklerken çaktırmadan (onChange olayında) dosyayı yüklüyor. Zaten Firebug ile XMLHttpRequest isteklerini dinlemeyi anlatacağım. O zaman tekrar bahsederiz
# byfobi | 18 Nisan 2007, 01:26
Test etme alanında sorun var sanırım makele için tşkler.
# eburhan | 18 Nisan 2007, 09:15
Örnekleri “ücretsiz” sunucuda tuttuğumuz için bazen böyle sorunlar oluşabiliyor. Sorunu düzelttim ve şimdi eskisi gibi çalışıyor. Haber verdiğiniz için teşekkürler
# bayram | 25 Nisan 2007, 10:37
harika güzel olmuş
# herace | 29 Nisan 2007, 00:18
yakuter hani demişsin ya bunu geliştirmeyi düşünüyorum dört gözle bekleyenlerdenim
# Melih | 16 Mayıs 2007, 21:13
Teşekkürler. Ajax’a yeni başladık.Açıkçası mantığını anlamada çok faydasını gördüm.
# selant | 18 Mayıs 2007, 22:13
hocam çok sağlam makale olmuş, tebrikler, teşekkürler.
# Emrah | 31 Mayıs 2007, 17:23
Selamlar
Çok güzel bir yazı olmuş, teşekkürler.
Ben bir sorunla karşılaştım ve fikrinizi almak istiyorum.
Bu sistemi kendi upload fonksiyonumla harmanladım ve çok güzel çalıştı.
Ancak upload olayını yüksek hacimli dosyalarda kullanırken, fonksiyon upload işlemini bitiremeden dizin.php yenileniyor.
Bu durumda dosya maalesef yüklenmemiş gözüküyor.
2 şansım var.Birisi yenile butonunu kullanıp kontrol etmek.
(bu amatörce geliyor biraz ve kullanmak istemiyorum)
birde sleep fonksiyonunun süresini uzatmak var ama onuda tahmin etmek imkansız.
15 sn desem kısa olabilir, 40sn desem o da çok fazla…
Sizce dizin.php yi otomatik olarak 10sn de bir yeniletmek nasıl olur? Ve bunu nasıl yapmalıyım?
Yada aklınıza gelen başka bir metod var mı?
Teşekkürler
# GÖkhan | 01 Haziran 2007, 01:09
Merhaba. Sleep() fonksiyonunu kullanmak hatalıdır. Dosya boyutunu bilmediğimiz için ve/veya sunucunun o anki durumuna göre dosya yükleme süresi değişeceğinden sleep() pek yararlı olmaz. Bunun yerine dosyaGonder(); fonksiyonu ile yeni bir xmlHttprequest nesnesi çalıştırıp bu nesneyi dizin içeriği alındığında bilgiler değiştiği ana kadar setTimeout ile tekrarlı çalıştırabiliriz. Dizini listelemek için alınan bilgilerde bir değişiklik olduğu anda clearTimeout ile tekrarlamayı durdurabiliriz. Bu aynı anda iki kişinin dosya yüklemesi durumunda da bize yarar sağlar.
# Onur | 14 Haziran 2007, 03:21
merhaba,
HATA: Internal Server Error hatası alıyorum. neden bu tür bir hata veriyor?
# Caner | 26 Haziran 2007, 12:22
Ne kadar büyüklükte dosyalar kabul ediliyor acaba ? Öylesine deneyeyim dedim ama tam kestiremedim.Resimler yükleniyor ama EXE’ler yüklenemiyor, ayrıca 26 MB’Lık bir exe’yi uzantısı jpg olacak şekilde denedim yine yüklenmedi.Bir sınırı var mı ? Kıstaslardan bahsedecek olan arkadaşların yorumlarını bekliyorum.
Hepinize iyi günler, iyi çalışmalar dileirm…
# eburhan | 28 Haziran 2007, 09:37
@Caner
Belli bir dosya boyutunu geçerseniz sistem yüklemenize izin vermiyor. Bu limitin kaç mb olduğunu söyleyemeyiz. Bu arada exe, php gibi dosyalara izin verilmiyor.
# Caner | 28 Haziran 2007, 11:20
Teşekkür ederim Eburhan.Ancak neden söyleyemediğini merak ediyorum.Acaba bu 110mb’deki hesabın güvenliği için mi yoksa kesin bir değeri olmadığından mı :S ?
Bu değer benim için önemli.Kodlarda kesin bir ifade göremediğimden merak ediyorum affedin.Hem, exe gibi dosylara izin vermek için ne yapmak gerekir ?
Hoşçakalın.
# eburhan | 28 Haziran 2007, 12:04
@Caner
Bu makalenin sonunda kaynak kodları indirebileceğiniz adres mevcut. Bu adresten indirdiğiniz dosyada herhangi bir kısıtlama yok. Yani exe gibi dosyalara izin vermek için ekstra birşey yapmayacaksın.
Biz 110mb’a yüklerken ise mecburen bazı kısıtlamalar yapmak zorundaydık. Çünkü sistemi suistimal etmek isteyen zıpçıktılar oldu maalesef. Neden böyle yapıyorlar anlam veremiyorum. Sanki biz orada 10.000 kişinin kredi kartı bilgilerini saklıyoruz
# Caner | 28 Haziran 2007, 12:35
Boşuna mesaj kirliliği yaptığımı sanmayın ama aslında merak ettiğim bir diğer sorunun cevabını alamadım.Biz bu indirdiğimiz kaynak kodlarını localde çalıştırıyoruz diyelim.Makinemde dosya saklayacağım mesela ben.Bu örneklerle ne kadar büyüklükte bir arşiv dosyasını ya da video dosyasını saklayabilirim mesela ? Bunu merak ediyorum aslında.
Hoşçakalın.
# eburhan | 28 Haziran 2007, 13:21
Ne kadar büyüklükte dosya uplaod edebileceğini php.ini dosyasındaki upload_max_filesize ayarı belirler. Meselâ bu ayarı 500M olarak belirlersen 500 MB’a kadar kendi bilgisayarında dosya upload edebilirsin.
# Caner | 28 Haziran 2007, 13:24
Tamaaam, ben de diyorum neden 2 MB’dan büyük dosyalarda sapıtıyor diye. Bendeki 2 MB imiş. Eburhan işte bu cevap bana yeter kardeşim. Çok sağol. Demek ki şu php öğrenme sürecinde, etrafı daha fazla kurcalamam gerekiyor.
Hoşçakalın. İyi çalışmalar…
# farkob | 20 Temmuz 2007, 18:20
Dosya boyutu değil önemli olan, sleep(2)’dir. Eğer yorumlarda denildiği gibi setTimeout’la birkaç saniyede bir denenmesi daha mantıklı.
Çünkü 26 Mb iki saniyede yüklenemez, ve cevap 2sn hatta artı bir kaç milisaniye sonra geleceğinden, yüklenmemiş olduğu için yüklenmiyor. Ayrıca exe’ler için bir snırlama yok görüldüğü gibi PHP scriptinde de. Ama belki php.ini’de ayarı vardır, sadece şu mime typelarını kabul et diye.
Ayrıca sadece resim upload edilen yerlerde, aklınızda bulunsun, imaj açılıp gd libraryle yazdırılıp tekrar kaydedilir. O yüzden mesela imageshack’e de upload edemezsiniz exeleri.
# yakuter | 20 Temmuz 2007, 18:35
@farkob yorumuna tamamen katılıyorum. Sadece şu notu düşmek istedim, bu örnek upload işleminin nasıl yapıldığını en basit haliyle anlatmak içindi tıpkı sitedeki diğer örnekler gibi. Güvenliktir, diğer olasılıklardır düşünmedim. Fakat dediğin gibi buna bir exe kontrolü, dosya boyutu kontrolü vs eklenebilir. Teşekkür ederim yorumun için.
# Slyther | 22 Temmuz 2007, 20:06
Neden hep PHP olarak yapıyorsunuz anlamadım gitti?
# yakuter | 23 Temmuz 2007, 00:23
#Slyther, aslında cevap basit, PHP bildiğimizden PHP ile yazıyoruz
# hasan | 26 Temmuz 2007, 07:30
super bi anlatim olmus paylasim icin teskurler
# Cumhur KORKUT | 01 Ağustos 2007, 21:43
@Slyther, PHP daha çok kullanılıyor ve açık kaynaklı. Sen de ASP(.NET) konusunda bize destek verebilirsin.
# doğan | 01 Eylül 2007, 09:27
herşey iyi güzel ama bu kütüphaneyi nereden indirecem?
# eburhan | 01 Eylül 2007, 15:18
@doğan
http://ajax-tr.com/wp-content/ekler/37/indir/ linkinden indirebilirsin.
# hikmet | 10 Eylül 2007, 13:41
eburhan makalelerini okudum. sorum şu ;ajax kodlarının olduğu html sayfasıyla verileri çektiğimiz asp yada php saysası farklı serverlardaysa , xmlhttp.open(’post’,url,true) yada xmlhttp.open(’get’,url,true) satırında erişim engellendi diye js hatası veriyor.yani url olarak http://www.xxx.com/xxx.asp gibi kullanamazmıyız.
# selçuk | 12 Eylül 2007, 09:20
Çok güzel bir örnek emeği geçen herkese tşkler.
Benim takıldığım bir nokta var. Dosyaları silerken mysql den de silmek istiyorum bunun için bazı oynamalar yaptım kodlarda mesala dizin php de sil linkinde ‘[sil]’ user_id ekledimki user_id yi almak için ve dosyasil fonksiyonunuda
function dosyaSil(silinecekDosya,userid) {
if( confirm(’Dosya Silinsin mi?’) ) {
var sc=”yap=sil&dosya=”+silinecekDosya+”&userid=” + userid;
var sc=”yap=sil&dosya=”+userid;
JXP(1, “dizin_alani”, “cevap.php”, sc);
}
}
gibi bir değişiklik yaptım ama sil e tıklayınca çalışmıyor. Bu konuda yardımlarınızı bekliyorum.
Tşkler
# etranger | 13 Eylül 2007, 10:55
içerikte biraz değişiklik yaptım dosyaları veritabanına yazdırmak için $_File[’dosya’][’name’] boş dönüyor. Bu konuda yardımcı olabilir misiniz ?
# Harmankaya | 21 Ekim 2007, 19:50
Güzel bir içerik olmuş eburhan arkadaşımızada kütüphanesinden dolayı teşekkürler
# goksel | 19 Kasım 2007, 09:29
Arkadaşlar göndermeç tadında iframe ve ajax la çalışan güzel bir iş çıkardım. Görmek isterseniz www.caddy-tasarim.com/fileupload
Kaynak dosyalar www.caddy-tasarim.com/fileupload/fileupload.rar
# Nurullah Okatan | 09 Ocak 2008, 23:14
Yakuter gerçekten başarılı bir çalışma olmuş, tebrik ediyorum seni. Şimdi yapacagım bir site için böyle orjinal birşeye ihtiyacım vardı, biraz daha güçlendirip sistemde kullanabilirim. Emeğine, beynine, parmaklarına sağlık.
# onuR | 22 Ocak 2008, 18:14
merhaba, ajax-gondermec’i sitemizde kullanmamıza izin var mı?
teşekkürler.
# Mustafa DEMIR | 29 Ocak 2008, 16:34
sLm iLLa beni php öğrenmeye teşvik ediceksiniz
arkadaşlar neyse şimdiye kadar indirdiğim kodları asp ye çevirdik sonuçta php mantığıda aynı.. ama php de öğrenicem
olmuyor böle
Makale çok güsel çalışmada öyle tebrikler..
# kerem | 12 Mart 2008, 10:40
tebrik ederim çok güzel bir çalışma olmuş.
# Matasoy | 22 Mart 2008, 14:06
Eline sağlık. Bir de bunun mysql le bağlantılı yapabildikmi tamamdır. yukarda birisi biraz uraşmış. ama bende şimdi uğraşacam. kullanıcı girişine adapte etmem lazım. Öğrencilerimden dosyaları bu aracılığı ile almayı düşünüyorum. Ama bazen dosyalar biraz büyük oluyor. 5mb 10mb 17mb gibi. Buyüzden rapidshare deki gibi bi bara ihtiyacım da olacak. Progress bar yani.
Eğer bud ediklerimi yapabilen birisi varsa cevap verirse de çok mutlu olurum.
Kolay gelsin iyi çalışmalar.