Jquery ve PHP ile Ajax stili çoklu dosya göndermek

Bu örnekte Jquery ile istediğimiz kadar dosya yolu kutusu ekleyip birden fazla dosyayı ajax stilinde sayfa yenilenmeden sunucuya yollayacağız. Galeri oluşturmak için oldukça kullanışlı olabilecek bir uygulama.

Detaylara geçelim. Uygulamamızda ajax stili derken iframe kullanarak sayfa yenilenmeden gerçek bir post işlemi yapacağız böylece ajaxı simule edeceğiz . Bildiğimiz Ajax ile dosya yükleme işlemini maalesef yapamıyoruz. Fakat file post (sunucuya dosya göndermek) işlemini farklı bir pencere gibi davranan iframe sayesinde Ajax kullanıyormuş gibi bir durum yaratmak mümkün. O yüzden başlıkta Ajax stili diye bir sıfat kullandım.

Uygulamamızda kullanıcı tarafında Jquery javascript kütüphanesini, sunucuda PHP dilini kullancağız.

Jquery ve PHP ile Ajax stili çoklu dosya gönderme uygulamasının özellikleri şunlar olacak:

  • Kullanıcı istediği kadar dosya yolu kutusu ekleyebilecek.
  • Dosya upload işlemininin sonucunda açılan sayfa (form action sayfası) gizli iframe içerisine yönlendirilecek.
  • Php sayfamızda gönderilen dosyaların geçerliliğini kontrol edip sonuç kodu üreteceğiz ve bunu istemciye yollayacağız.
  • Dosyalar yüklendiğinde veya yüklenmeyip bir hata olduğunda kullanıcıya hatanın türü bildirilecek.
Iframe elemenını html sayfasına ekeleyeceğiz ama gizleyeceğimiz için kullanıcı bunu göremeyecek. Dosyalar submit edildiğinde form, formu işleyecek php sayfasına gönderilcek ve çıkan sonuç (mesaj diyelim) iframeiçerisine yansıtılacak. Bu sırada sonuc katmanına yükleniyor animasyonu ekleyerek (loading.gif) Ajax stili çoklu dosya gönderimini yapmış olacağız. Daha sonra iframe içerisine gönderilen mesaj (sunucudan gelen cevap) okunup mesaj koduna göre kullanıcı bilgilendirilecek. Uygulamnın çalışır halini php-ajax-jquery-coklu-dosya-yukleme-demo'dan test edebilir ya da aşağıdan görebilirsiniz:

php-ajax-jquery-multi-file-upload-uygulama-ornek 1 php-ajax-jquery-multi-file-upload-uygulama-ornek 2 php-ajax-jquery-multi-file-upload-uygulama-ornek 3
Dosyalar doğru seçildiği zaman Dosya kutusu boş bırakıldığı zaman Dosya tipi geçersiz olduğu zaman

Uygulama bittiğinde dosyalar şu şekilde görünecek:

php-ajax-jquery-multi-file-upload-dosyalar

Jquery ve PHP ile Ajax stili çoklu dosya gönderme uygulamasının istemci taraflı kodlama kısmı:

Şimdi önce html kodumuz daha sonra Jquery kodumuzu yapalım. Form elemanlarımızı ve iframe elamanını body içine koyuyoruz:

<form id="file_upload_form" method="post" enctype="multipart/form-data" action="upload_file.php">
    <div id="dosyalar">
    <input name="file[]" id="file" size="27" type="file" /><br />
    <input name="file[]" id="file" size="27" type="file" /><br />
    </div>
    <input type="submit" name="action" value="Upload" /><br />
    <button type="button" id="kutu_ekle">dosya kutusu ekle </button>
</form>

<iframe id="upload_target" name="upload_target" src="" style="display:none;"></iframe>

<div id="sonuc"></div>
Yukarıdaki iframe elamanının style'nı "display:none" yaparak giziliyoruz. "Upload" tuşuna basıldığında gerçekleşecek olayları Jquery ile yapacağız. Jquery Upload tuşuna basıldığında formun hedefini iframe yapacak, iframe yüklendiğinde yazacağımız fonksiyonun tetiklenmesini sağlaması için olayı set edecek. Jquery kodumuz :

$(document).ready(function(){
    
    // dosya kutusu eklemek icin click olayı çağrılacak fonskiyon
    $('#kutu_ekle').click(function ()
        {
                $('#dosyalar').append("<input name=\"file[]\" id=\"file\" size=\"27\" type=\"file\" /><br />");    
        }
    );

    // form submit edildiğinde form_submit fonksiyonu çağrılacak.
$('#file_upload_form').bind('submit', form_submit);
    
function form_submit(){            
    // once sonucu gostereceğimiz katmanı temizliyoruz.
    $('#sonuc').empty();
    // Form submit edildiğinde action dosyasının çıktısını iframe içerisine yönlendiriyoruz.
    // Yani formun çıktısını iframe içerisine yönlendirerek yeni sayfa açılmasının önüne geçmiş oluyoruz.
    $('#file_upload_form').attr('target','upload_target');
    // dosyalar yüklenene kadar yükleniyor animasyonu ekliyoruz sonuç katmanına.
    $('<img/>').attr('src','loader.gif').appendTo($('#sonuc'));
    // dosyalar gönderildiğinde çağrılacak olayı ve fonksiyonu burada belirliyoruz.
    $('#upload_target').bind('load', file_loaded);                    
    }
    
// dosyalar yüklendiğinde çağrılacak fonksiyon.    
function  file_loaded () {    
    // iframe içerinden mesajı alıyoruz. Bu 1, 2, 3 ya da 4 olabilir.
    var message = $('#upload_target').contents().find('body').text() ;
    // yükleniyor animasyonunu kaldırıyoruz.
    $('img').remove();
    // sunucudan dönen mesajı iframe içerisine yollamıştık şimdi bu mesaja
    // bakarak kullanıcıyı bilgilendirelim.
    if (message==1)       $('#sonuc').html('dosyalar yuklendi').css('color','green');
    else if (message==2)  $('#sonuc').html('dosya ya da dosyalar hatalı').css('color','red');
    else if (message==3)  $('#sonuc').html('dosya tipi ya da tipleri hatalı <br /> (gif ya da jpeg olmalı) ').css('color','red');
    else if (message==4)  $('#sonuc').html('dosyalar eksik').css('color','red');
    }
                
});

Jquery ve PHP ile Ajax stili çoklu dosya gönderme uygulamasının sunucu taraflı kodlama kısmı:

Kullanıcı (istemci) taraflı kodlarımızı yazdıktan sonra son işlem sunucu tarafında gönderilen dosyaları karşılayacak PHP kodunu yazmak olacak. Burada gönderilen dosyaların hepsini for döngüsü içinde kontrol edip dosya tipini ve hatasını kontrol edeceğiz. Dosyaların hepsi sunucuya kaydedildiğinde 1 sonucunu, dosyalardan biri hatalı olduğunda 2, tipi geçersiz olduğunda 3, biri boş olduğunda ise 4 sonucunu mesaj olarak yollayacağız. Bir nevi geri besleme yapacağız ki kullanıcı sonucun ne olduğunu görsün. Eğer her hangi bir hata çıkarsa hiç bir dosya kaydedilmeyerek kullanıcı uyarılacak. Dosya hatalarının kontrolünü if else kontrolü ile yapacağız. PHP'de POST edilen dosyalar $_FILES dizisinde saklanırdığı için bu dizinin içeriklerine bakacağız. Bu dizide dosyanın kendisi ve özellikleri mevcut. upload_file.php dosyasının içeriği:

<?php
// 2 saniye sunucu cevabını test amacıyla geciktiriyoruz. 
sleep(2);

// dosya  tipini kontrol ediyoruz (gif ya da jpeg)

$durum=0;

// Göndirilen dosyaların tümünün tipini, hatasını for döngüsü ile kontrol ediyoruz.
// İsterseniz siz bir if kontrolü ekleyerek dosyanın boyutunu da kontrol edebilirsiniz.

for($i=0; $i < count($_FILES['file']['tmp_name']);$i++)
{ 
// dosya tipinin gif ya da jpeg olmasını istiyoruz.
if ( (($_FILES["file"]["type"][$i] == "image/gif")|| 
    ($_FILES["file"]["type"][$i] == "image/jpeg")) )
    
    {
        if ( $_FILES["file"]["error"][$i] > 0 )
            {
                // dosya hatali
                $durum=2;  break;
            }
        else
            {
                    // son dosya kontrolü de olumluysa durumu 1 olarak degistirip dosyalari sunucuya
                    // kaydedecek fonksiyonu çalıstırıyoruz.
                    if ( count($_FILES['file']['tmp_name'])== $i+1 ) 
                           {$durum=1; dosyalari_sunuya_kaydet();  break;}
            }
    }
    
else
    {
        // dosyalarin bos olup olmadığını kontrol et
        if ($_FILES['file']['name'][$i]==null)
              {$durum=4; break;}
        // dosya tipi geçersiz olduğunu bir önceki if kontrolünü geçtiğinden anlıyoruz.
        else
              // dosya tipi gecersiz
             { $durum=3; break; }
    }
}

// burada istemciye sonuç kodunu yolluyoruz.
// sonuç kodlarını 1, 2, 3 ya da 4 olabilir.
echo $durum; 

function dosyalari_sunuya_kaydet ()

{
     for($i=0; $i < count($_FILES['file']['tmp_name']);$i++)
     { 
      if (file_exists($_FILES["file"]["name"][$i]))
          {
             continue;
          }
          else
          {
          // dosyalar teker teker bu php dosyanın kayıtlı olduğu yere kaydediliyor.
              move_uploaded_file($_FILES["file"]["tmp_name"][$i], $_FILES["file"]["name"][$i]);
          }
     }
}
?>
PHP ve Jquery ile Ajax stili çoklu dosya gönderme işlemini bu şekilde yapmış olduk. Siz kendi kontrollerini ekleyerek uygulamayı istediğiniz yöne çekebilirisiniz. Uygulamanın dosyalarını php-ajax-jquery-coklu-dosya-yukleme-dosyalar linkinden indirebilirsiniz.
yazan Zülküf Küçüközer tarih   4th September 2009
primary key words  Php | Jquery | Ajax | Çoklu dosya okunma  17695
secondary key words  Iframe | Javascript
writing selman tunç writing 4th February 2010
nette bu konuda baya bi araştırma yaptım,ben kendi upload sınıfımı yazmıştım jquery ile post nasıl yaparım diye düşündüm,
writing Zülküf Küçüközer writing 14th February 2010
Olur, gönderirseniz sevinirim..
writing selman tunç writing 20th June 2010
daha önce bahsettiğim upload linki http://www.selmantunc.com/stnc-file-upload-and-ajax-v2-5/
writing Goksel KIRCA writing 29th November 2010
Ellerinize sağlık çok güzel bir uygulama ama buna dosya kutusu ekle konmusken birde DOSYA KUTUSU CIKAR nasıl ekleriz, örneğin ben söyle denedim ama sanırım yönetmi bu değil.
writing Serhat writing 4th August 2011
Teşekkürler. Projemde deneyeceğim. Takıldığım nokta olursa sorabilir miyim?
writing Nedim writing 26th June 2012
Bir ders bu kadarmı güzel anlatılır helal olsun..Çok teşekkürler anlatım için. Paylaşımlarınızın devamını diliyorum.İyi Çalışmalar..
writing Fatih writing 16th September 2012
Merhabalar, iframe kullanmadan direk olarak $.ajax metodu ile yapamazmıyız? Gerçi ben denedim yapamadım. Soru olarak sizlere yönelteyim dedim. Saygılar...