Ajax dosya yükleme

21 / Nisan / 2008 Author

İsa Engiz

ajax

ajax, dosya yükleme Yorumlar

4 Yorum Yapilmis.

Ajax’ın belki de en sevimli tarafı, web arayüzlerini daha etkileşimli hale getirmesidir. Kullanıcı, sunucu’dan bir istekte bulunduğunda, sayfanın yenilenmeden cevabın yazılması kadar, arada geçen sürede kullanıcıya “işleminiz gerçekleştiriliyor” tarzı bir uyarı yazısı vermek elbette ki etkileşimi arttırmaktadır.

yukleme-resim

Sunucuya dosya yükleme durumunda da böylesine bir etkileşim sağlamak istersek, güvenlik nedeniyle bunu klasik ajax teknikleri ile yapmamız biraz zor olacaktır, ama yine de bu etkileşimi sağlayacak ve uygulamanın “ajax gibi” davranmasını sağlayacak metodlar mevcuttur. Biz burada “iframe” tekniğini kullanacağız.

Uygulamanın canlı haline buradan göz atabilir veya dosyaları buradan indirebilirsiniz.

Teknik

Tekniğimiz oldukça basit:
1- Normal yükleme formu oluşturacağız
2- Yükleme formunun hedef dosyasını sayfada görünmeyen bir iframe yapacağız.
3- Form gönderildiğinde ekrana (javascript ile) “yükleniyor” yazdıracağız.
4- PHP sayfamız işini bitirdiğinde ekrana (javascript ile) “dosyanız yüklendi” yazacağız.

Ana sayfa

Ana sayfamız basit bir yükleme formundan oluşuyor:

<h1>Ajax Örnek Yükleme Formu</h1>
 
<div id="yukleme">Yükleniyor...<br/><br /><img src="yukleniyor.gif" /><br /><br />Lütfen bekleyiniz...</div>
 
<div id="yukleme_formu_alani">
Aşağıdaki form yardımıyla dosyanızı seçiniz ve yükle düğmesine tıklayınız.<br /><br />
 
<form id="yukleme_formu" action="yukle.php" method="post" enctype="multipart/form-data" target="iframe" onsubmit="yuklemeyiBaslat();" >
Dosyanız: <input name="dosya" type="file" />
<input type="submit" value="Yükle" />
</form>
</div>
<iframe id="iframe" name="iframe" src="#" style="width:0;height:0;border:0px solid #fff;"></iframe>

Burada dikkat etmemiz gereken 3 nokta var.

Birincisi “yükleniyor” yazı ve animasyonunu dokuman yüklendiğinde biz de yüklüyoruz ancak sitil dosyamızda “display:none” olarak tanımladığımızdan ilk başta gözükmüyor.

İkincisi, oluşturduğumuz yükleme formunun hedef dosyasını “iframe” id’li iframe olarak belirliyoruz ve “onsubmit” olayını ekliyoruz: “onsubmit=”yuklemeyiBaslat();””

Üçüncüsü ise iframe’in görüülebilirliğini 0 yapıyoruz, kullanıcı hiç farketmiyor.

Javascript

Uygulamanın javascript kısmı, daha önceki uygulamalarımıza göre oldukça basit, 2 tane fonksiyonumuz var:

yuklemeyiBaslat()

function yuklemeyiBaslat()
{
	document.getElementById('yukleme').style.display = 'block';
	document.getElementById('yukleme_formu_alani').style.display = 'none';
}

Bu fonksiyon, form alanında “yükle” düğmesine tıklandığında çağrılıyor ve yaptığı iki iş var, formu gizlemek ve animasyonu göstermek.

İkinci fonksiyon is yuklemeyiDurdur()

function yuklemeyiDurdur(sonuc){
      var result = '';
      if (sonuc == 1){
         result = '<div class="uyari1">Dosyanız başarıyla yüklendi!</div><br/><br/>';
      }
      else {
         result = '<div class="uyari2">Bir sorunla karşılaşıldı, dosyanız yüklenemedi!</div><br/><br/>';
      }
      document.getElementById('yukleme').style.display = 'none';
      document.getElementById('yukleme_formu').innerHTML = result + "<form id='yukleme_formu' action='yukle.php' method='post' enctype='multipart/form-data' target='iframe' onsubmit='yuklemeyiBaslat();' >Dosyanız: <input name='dosya' type='file' /><input type='submit' name='submitBtn' value='Yükle' /></form>";
      document.getElementById('yukleme_formu_alani').style.display = 'block';
}

Bu fonksiyon, PHP dosyasından dönen sonuca göre uyarı metnini belirliyor ve bu uyarı metni ile beraber formu tekrar ekrana yazdırıyor.

PHP dosyası

PHP dosyamızın kodları da yine oldukça basit:

<?php
$destination_path = getcwd().DIRECTORY_SEPARATOR;
 
$sonuc = 0;
 
$target_path = $destination_path . basename( $_FILES['dosya']['name']);
 
if(@move_uploaded_file($_FILES['dosya']['tmp_name'], $target_path))
{
	$sonuc = 1;
}
 
 sleep(1);
?>
 
<script language="javascript" type="text/javascript">window.top.yuklemeyiDurdur(<?php echo $sonuc; ?>);</script>

Basit bir yükleme olayı gerçekleştiriyor. Bu kodda asıl önemli olan yer, kodun son bölümünde yer alan javascript kısmı. Aslında bu PHP dosyamız, iframe içerisinde işleniyor, sonucunda ise az önce yukarıda belirttiğimiz yuklemeyiDurdur() fonksiyonu çağrılıyor.

Görüldüğü gibi aslında bu uygulama tam olarak bir ajax uygulaması değil, “ajax-gibi” uygulaması, daha etkileşimli bir form arayüzü hazırlamış olduk sadece.

Dosyaları buradan indirip kodları inceleyebilirsiniz.

Not:
bu yazılara göz atmak isteyebilirsiniz:

http://www.ajaxf1.com/tutorial/ajax-file-upload-tutorial.html

http://swik.net/Ajax/Ajax+Images

- Bu blogda yer alan yazıları RSS ile takip edebilirsiniz. RSS aboneliği için tıklayın.

- Ya da bu blogda yer alan bütün yazıları içindekiler sayfasında görüntüleyebilirsiniz. Tıklayın!