Javascript ile sunucuya dosya yükleme işlemi

13 Eki

Javascript dili son yıllarda yaygın bir ön yüz(front end) geliştirme aracı haline gelmiştir. Farklı problemlere çözüm üreten kütüphanelerin sayısı gün geçtikçe artmakta ve “front end” geliştiricilerin işi de epeyce kolaylaşmaktadır.  Bazı durumlarda hazır kütüphanelerin dışına çıkıp kontrolü elimize almak istediğimizde Javascript kodları ile birebir haşır neşir olmak durumunda kalırız.

Javascript ile ağırlıklı olarak DOM (Document Object Model) işlemeleri yapılmaktadır. DOM Türkçe olarak “Belge Nesnesi Modeli” şeklinde çevirilebilir. Sunucu tarafından oluşturulup(render) bize gönderilen internet sayfasını bir belge olarak düşünebiliriz. Bu internet sayfasında gördüğümüz yazı, resim, video, form gibi elemanları birer nesne olarak düşünebiliriz. Javascript dili ile bu nesneler üzerinde işlemler yapabilmekteyiz. Bunun yanı sıra Javascript dili bize sunucu ile iletişim kurmamızı da sağlamaktadır. Sunucudaki bir URL üzerinden veri istemek veya sunucuya veri göndermek mümkündür.

Javascript bize, sunucuya düz metin (plain text) verisi göndermenin yanı sıra bir de dosya gönderme imkanı sunmaktadır. Bu yazının konusu da dosyaların sunucuya gönderimi sırasında işlemleri takip etmektir.

Javascript ile arka plandan sunucu ile bilgi alışverişi yapmak istediğimizde XMLHttpRequest nesnesini kullanırız. XMLHttpRequest nesnesi ile;

  • Sayfa yenilemeden bilgi alışverişi yapmak mümkündür.
  • Veri alışverişi arka planda gerçekleşir.
  • Veri alışverişi asenkron veya senkron olarak belirlenebilir.

Sunucuya bir istek göndermek için XMLHttpRequest nesnesinin Open() ve Send() metodları kullanılır.

  • open() Metodu: Gönderilen isteğin(request) türünü(GET, POST), URL adresini ve isteğin asenkron olup olmadığını belirler.
  • send() Metodu: İsteği sunucuya gönderir.

XMLHttpRequest nesnesinin çalışma prensibini incelemek için bir kaç örnek vermeden geçmek olmaz.

Örnek: Senkron çalışan yöntem

Senkron Yöntem

Senkron Yöntem

Senkron yöntemlerde open() metodunun son parametresi false olarak belirlenir ve send() metodu ile istek sunucuya gönderilir. İşlem asenkron olmadığından istek gönderildikten sonra cevap gelene kadar beklenir. Yani send() metodundan sonra gelen kodlar çalışmaz.

Örnek: Asenkron çalışan yöntem

Asenkron Yöntem

Asenkron Yöntem

Asnekron isteklerde open() medodunun son parametresi true olarak belirlenir ve request nesnesinin readystatechange olayına(event) bir metod bağlanır. Sunucudan cevap geldiğinde bu metod tetiklenir. İsteği göndermek için send() metodu çalıştırılır.  İşlem asenkron olduğundan send() metodu çalıştırıldıktan sonra başka kod satırları varsa onlar da çalıştırılır.

Bu örneklerde sunucudan GET metodu ile düz metin sonucu almak için uygulamalar yaptık.

Asıl konumuz, bir dosyanın bir isteğe(request) eklenerek sunucuya gönderilmesi işlemidir. Dosyalar büyük veriler olabildiği için, uzak sunucuya gönderilmeleri sırasında takip grektiren bir durum durum ortaya çıkmaktadır. İsteğin sunucuya ulaşıp ulaşmadığı, dosyanın bir T anında yüzde kaçının yüklendiği ve işlemin tamamlanıp tamamlanmadığı gibi durumların kullanıcıya bildirilerek belirsizliğin ortadan kaldırılması gerekmektedir.

Dosya gönderim işlemleri sırasında XMLHttpRequest nesnesinin upload özelliğinden faydalanırız. upload özelliği üzerindeki olaylar(events) sayesinde yükleme işlemlerini takip edebiliriz.

Upload Javascript Kodu

Upload Javascript Kodu

upload özelliğinin;

  • loadstart olayı: yükleme işlemi başladığında tetiklenir.
  • progress olayı: yükleme işlemi sırasında her giden byte grubu sunucuya aktarıldığında tetiklenir.
  • load olayı: yükleme işlemi başarıyla tamamlandığında tetiklenir.

request.open() metodu çalıştırıldıktan sonra setRequestHeader metodu ile gönderilecek olan isteğe(request) dosya bilgileri eklenir. Dosya bilgileri, file tipindeki input elementinden alınır. send() metodu ile istek POST tipinde sunucuya gönderilir. Burada send netodunun parametre alan çeşidi kullanılmış ve parametre olarak POST edilecek bilgi send metoduna eklenmiştir.

Dosya Upload İşlemi

Dosya Upload İşlemi

Dosya yükleme sırasında işlem takibini konsola yazarak gerçekleştirdim. Siz isterseniz HTML elementlerine yazarak gerçekleştirebilirsiniz. Hatta daha önceki yazılarımdan birinde css aracılığı ile durum çubuğu yapmayı işlemiştim. Dosya upload işlemini bu yöntemle bir durum çubuğuna bağlamak mümkündür.

Bir sonraki yazıda görüşmek üzere.

7 thoughts on “Javascript ile sunucuya dosya yükleme işlemi

  1. anlatım için çok teşekkürler. yazılarınızı severek takip ediyorum. iyi çalışmalar.

  2. elinize sağlık ama bu kodu nasıl tetikleyeceğiz?
    ikincisi bu kodları birsayfayamı gönderip işlenecek yoksa kendisi dosya yüklüyormu,sabahtan beri kodlara bakıyorum bunlar çalışmıyor,,çünkü bu kodları çağıramıyorum..yani kodları yazdık ama ne olacak yazdık kaldı.bişey olmadı,,başı yok sonu yok..

  3. Hocam Ellerinize sağlık güzel bir döküman olmuş. Hocam Bir Sorum Olacak.

    XMLHttpRequest() ile post metot ile gönderdiğimiz verilerin geri dönüşü responseXML nasıl geri okunur. responseText ile okunuyor. Ama Ben responseXML ile okumak istiyorum ve NULL Cevap dönüyor. Yardımcı Olursanız sevinirim.

  4. @ömer, yukarıdaki örnekte onreadystatechange event işlem tamalandığında readyState olarak 4 döndürür, onu kontrol ettiğimiz if bloku içerisinde responseXML gelmesi gerek. Ancak sizin talep gönderdiğiniz servis ContentType olarak text/xml şeklinde cevap döndürüyor mu? Bu noktada bir sorun olabilir.

Comments are closed.