Mar

Php’ de Ajax yardımıyla dosya yükleme (File Upload)

Php

Ajax yardımıyla dosya yükleme olayının nasıl yapılacağını çok kez düşünmüşümdür. Önceleri yapmaya çalışsamda başarılı olamadım. Taki bu konuyla ilgili bir arkadaşımın bana nasıl yapılacağını anlatmasıyla son buldu. 🙂

Normalde veritabanında değişiklikleri Ajaxla çok kolay şekilde yapabiliyorduk ancak dosya yükleme olayı işin içine girince bu olayı hep askıya almak zorunda kaldım. Şimdi size ajax yardımıyla doysa yüklemek için yapmamız gerekenleri anlatmaya başlıyayım ;

Ajax yardımıyla dosya yüklemek için kullanmamız gereken tagimiz “iframe” dir. Bu tag sayesinde ajax yardımıyla dosya yükleme olayını gerçekleştirmiş olacağız.


<form action="upload.php" method="post" enctype="multipart/form-data" target="upload_target" onsubmit="startUpload();" >
<p id="f1_upload_process">Yükleniyor...<br/><img src="loader.gif" /><br/></p>
<p id="f1_upload_form" align="center"><br/>
<label>Dosya:
<input name="myfile" type="file" size="30" />
</label>
<label>
<input type="submit" name="submitBtn" class="sbtn" value="Yükle" />
</label>
</p>

<iframe id="upload_target" name="upload_target" src="#" style="width:0;height:0;border:0px solid #fff;"></iframe>
</form>

yukarıda dikkat etmemiz gereken form tagimizin “target” özelliğine iframin adı olan “upload_target” ismini veriyoruz. Yani form submit olduğunda “upload_target” isimli iframe de açıl ve orada çalış. Tabi iframe de açılacak sayfada elbette formun action’ına vemiş olduğumuz “upload.php” dosyamızdır. Zaten upload.php dosyasında ilgili dosyayı yükleme işlemi yapacaktır.

Mantığı son derece basit ve kullanımı da bi o kadar kolay 🙂

Bu konunun bir çok arkadaşımızın kafasındaki soru işaretlerini kaldıracağından eminim…

Demoyu görmek isterseniz tıklayın.

İlgili örnek projeyi indirmek için tıklayın.

NOT : Proje bana ait değildir.

Bu yazımdaki amaç sadece olayın mantığını anlatmaktır.

15 yorum bulunmaktadır - “Php’ de Ajax yardımıyla dosya yükleme (File Upload)”

cemadam 23 Ağustos 2009, 14:06
dostum bilgiler için teşekkürler
Enes Pekkaya 24 Ağustos 2009, 21:58
kolay gelsinn…
birdost 15 Mart 2010, 23:19
aslında bu yönteme ajax dememiz doğru değil.Ajax için kullandığımız XMLHttpRequest objesi multipart/form-data tipinde data göndermeyi desteklememektedir. Bazı cin geliştiricilerin bulduğu bu yöntemle iframe kullanarak sayfanın yeniden yüklenmeden dosyayı gönderebildiğimiz doğrudur. Fakat sayfanın yenilenmediği her yönteme ajax diyemeyiz.
Enes Pekkaya 15 Mart 2010, 23:27
Peki ne desek doğru olur? 🙂 Bence bu işe bir ad koymak istersek en yakın tanım ajax olur herhalde.
hakel forum 17 Temmuz 2010, 12:33
şuda fena değil aslında http://www.selmantunc.com/advanced-php-file-upload-and-ajax-upload/
isfendiyar 02 Aralık 2010, 17:56
Merhaba,
Çok faydalı bir paylaşım oldu benim için. Artık gerisini php de istediğim gibi kontrol edebiliyorum.
Teşekkürler
Atilla 30 Aralık 2010, 10:25
Çok faydalı oldu projemde… emeğinizi takdir ediyorum.
isimsiz 16 Ocak 2011, 22:25
alıntı yapılan site : http://www.ajaxf1.com/product/ajax-file-upload.html
EagLe 06 Ağustos 2011, 12:53
bu uygulamanon amacı ney?uploadı nereye yapıyor?
Enes Pekkaya 06 Ağustos 2011, 18:50
Uygulamanın amacı sayfayı tamamen post etmeden yüklenecek dosyayı sunucuda belirttiğniz yere yüklemek. Yolunu belirterek istediğin yere upload yapabilirsin.
Hakan 09 Ekim 2011, 22:12
Bence gayet faydali bir yazi olmuş. Sayın Enes Pekkaya ya teşekkürü bir borç bilirim.
chat 20 Mayıs 2012, 12:25
Hocam teşekkürler zekice bi yöntemmiş siteme arkaplan yönetimi ekliyecektim sizin bu ufak scriptinizi entegre edeceğim.
erkan 04 Haziran 2012, 19:34
slm. bu dosyada ajax işlemi kullanılmamış. yani elde ettiğimiz datayı php ye nasıl göndereceğiz .
Enes Pekkaya 04 Haziran 2012, 20:15
ilgili dosyayı formunuzun actionına vermiş olduğunuz dosyada işleyebilirsiniz. Örnekde “upload.php” dosyasında işlem görülmekte. Aslında örnek dosyayı sizlerle paylaştım oraya bakarsanız daha iyi anlayabileceğinizi düşünmekteyim.
web tasarımı 12 Aralık 2012, 21:08
İngilizce sitelerde saatlerce araştırma yaptım, bu kadar basit ve işe yarayan bir kod bulamamıştım, teşekkürler, yine ne varsa bizim türklerde var 🙂