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:
Uygulama bittiğinde dosyalar şu şekilde görünecek: ![]() 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> $(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]); } } } ?> |
|||||||||||||||||||||
|
|||||||||||||||||||||
|
May 2013 (1)
July 2010 (1)
April 2010 (4)
March 2010 (1)
February 2010 (3)
December 2009 (2)
November 2009 (1)
October 2009 (4)
September 2009 (16)
August 2009 (21)
July 2009 (4)
July 2010 (1)
April 2010 (4)
March 2010 (1)
February 2010 (3)
December 2009 (2)
November 2009 (1)
October 2009 (4)
September 2009 (16)
August 2009 (21)
July 2009 (4)
İlk görev yerim ;)
Web programlamayla ilg ..
Mysql View Kullanımı
Jquery ve css ile hare ..
Mysql veritabanında Fu ..
Smarty Template Engine ..
İş ilanı (Flash ve AS3 ..
NATURAL JOIN , JOIN ON ..
Mysql veritabanında St ..
ASP.NET ile MySQL iliş ..
Web programlamayla ilg ..
Mysql View Kullanımı
Jquery ve css ile hare ..
Mysql veritabanında Fu ..
Smarty Template Engine ..
İş ilanı (Flash ve AS3 ..
NATURAL JOIN , JOIN ON ..
Mysql veritabanında St ..
ASP.NET ile MySQL iliş ..
Etiketler
| Ajax | As2 | As3 | Asp.net | Cookie | Çerez | Domdocument | Flash | Fonksiyon-yaratmak | İlişkisel-veritabanı | İş-fırsatı | İş-ilanı | Javascript | Mysql | Mysql-fonksiyonu | Normal-formlar | Normalizasyon | Oturum | Örnek | Php | Session | Tasarım | Türkçe-karakter | Veri | Veritabanı | Xml |arama
Loading
sosyal




