JQUERY FILE UPLOAD İLE ÇOKLU RESİM YÜKLEME VE SERVER-SIDE ENTEGRASYONU

JQUERY FILE UPLOAD İLE ÇOKLU RESİM YÜKLEME VE SERVER-SIDE ENTEGRASYONU

jQuery File Upload, Sebastian Tschan adında bir geliştiricinin yazmış olduğu bir JavaScript eklentisidir. Kullanıcılar için son derece kullanımı kolay, server tarafı için son derece güvenlidir. Data injection'a kapalı olan bu eklenti çoklu dosya yükleme imkanı sunar. Yüklenecek dosyaların uzantıları kolaylıkla değiştirilebilir ve dosya eğer resim formatına(PNG, JPG, GIF,  BMP) sahip ise boyutu client tarafta değiştirilebilir.

Bu yazımda jQuery File Upload ile nasıl çoklu dosya yüklemesi yapılır ve server tarafında gönderilen dosyalar nasıl kaydedilir elimden geldiğince anlatmaya çalışacağım.

Öncelikle buradan jQuery File Upload'u indirerek başlayalım. Server-side entegrasyonunu .NET ile yapacağım için Visual Studio da ASP.NET Web Form projesi oluşturuyoruz ve projeye indirdiğimiz eklentinin HTML dosyasını ekliyoruz. Ayrıca server tarafında gönderilen resmi yakalamak ve kaydetmek için Generic Handler dosyası ekliyoruz. Proje içerisine indirdiğimiz eklentinin css, js ve img klasörlerini olduğu gibi kopyalıyoruz. Yapılan işlemlerden sonra solution içeriğinin ekran görüntüsü aşağıdaki gibidir.

JQUERY FILE UPLOAD İLE ÇOKLU RESİM YÜKLEME VE SERVER-SIDE ENTEGRASYONU

Index.html

İndirdiğimiz eklentinin içerisinde bulunan index.html dosyasındaki html kodlarını projemizin içinde bulunan Index.html dosyasının içine kopyalıyoruz. Ben isimlerini güncelledim ve ihtiyacım olmayan bir kaç yeri kırptım. Projeyi çalıştırdığımda mevcut ekran görüntüsü aşağıdaki gibidir.

JQUERY FILE UPLOAD İLE ÇOKLU RESİM YÜKLEME VE SERVER-SIDE ENTEGRASYONU





Server-Side Entegrasyonu

Yüklenen dosyayı server tarafında kontrol etmek için solution içerisine Generic Handler tipinde bir ashx uzantılı dosya ekliyoruz. Generic Handler'ın içini doldurmadan önce jQueryFileUpload eklentisinin ihtiyacı olan iki adet class tanımlamamız gerekiyor. jQueryFileUpload eklentisinin çoklu resim yükleme aracı server tarafından gelen cevabı liste olarak ve belirli obje isimleriyle yorumlamak istiyor. Class'ların isimlerini istediğiniz şekilde verebilirsiniz. Ben aşağıdaki gibi oluşturmayı tercih ettim. Ancak DummyImage sınıfının içindeki değişkenlerin isimleri aşağıdaki gibi olmalıdır.

public class Dummy
{
    public List files { get; set; }

    public Dummy()
    {
        this.files = new List();
    }
}

public class DummyImage
{
    public string deleteType { get; set; }
    public string deleteUrl { get; set; }
    public string name { get; set; }
    public int size { get; set; }
    public string thumbnailUrl { get; set; }
    public string type { get; set; }
    public string url { get; set; }
}

DummyImage sınıfı jQueryFileUpload eklentisinin JavaScript callback de karşılayacağı image dosyalarının bilgilerini dolduracağımız sınıftır. Dummy sınıfı ise içerisinde DummyImage açılımlı bir listenin bulunduğu jSON a çevirip client'a cevap olarak geri göndereceğimiz sınıftır.

ImageUploadHandler: Bu ashx uzantılı handler içerisinde gönderilen dosyaları istediğimiz şekilde işleyip cevabı client'a geri döndüreceğiz. Generic Handler en yalın haliyle aşağıdaki gibidir.

public class ImageUploadHandler : IHttpHandler
{
    public void ProcessRequest(HttpContext context)
    {

    }

    public bool IsReusable
    {
        get
        {
            return false;
        }
    }
}

Şimdi ProcessRequest fonksiyonunun içinde gönderilen dosyayı kaydedip client'a cevap göndereceğiz. Bu kısmı kodu adım adım tamamlayarak anlatacağım.

1. Adım

public void ProcessRequest(HttpContext context)
{
    try
    {
        Dummy dummy = new Dummy();

        HttpPostedFile filePosted = context.Request.Files["images"];
        if (filePosted != null && filePosted.ContentLength > 0)
        {
            
        }
        else
            context.Response.Write(new JavaScriptSerializer().Serialize(dummy));
    }
    catch
    {
        context.Response.Write(new JavaScriptSerializer().Serialize(new Dummy()));
    }
}

HttpPostedFile türünden bir nesne oluşturarak client'dan gönderilen dosyayı elde ediyoruz. Index.html de input etiketinin name attribute değerini "images" yaptığım için client dan gönderilen görsel dosyayı "HttpPostedFile filePosted = context.Request.Files["images"];" kodu ile elde ettim. filePosted nesnesini kontrol ederek gönderilen resim dosyası için dolu mu boş mu kontrolünü yapıyoruz. 

2. Adım

public void ProcessRequest(HttpContext context)
{
    try
    {
        Dummy dummy = new Dummy();

        HttpPostedFile filePosted = context.Request.Files["images"];
        if (filePosted != null && filePosted.ContentLength > 0)
        {
            string imageFileName = "";
            string fileNameApplication = System.IO.Path.GetFileName(filePosted.FileName);
            string fileExtensionApplication = System.IO.Path.GetExtension(fileNameApplication);

            imageFileName =
                Guid.NewGuid().ToString() +
                "_" +
                DateTime.UtcNow.ToString("yyyyMMddHHmmssfff") +
                fileExtensionApplication;

            string filePath = System.IO.Path.Combine(context.Server.MapPath("/upload"), imageFileName);
        }
        else
            context.Response.Write(new JavaScriptSerializer().Serialize(dummy));
    }
    catch
    {
        context.Response.Write(new JavaScriptSerializer().Serialize(new Dummy()));
    }
}

Kullanıcının gönderdiği görsel dosyasının adını ve uzantısını değişkenlere atadık. imageFileName, dosyayı kaydederken vereceğimiz isimdir. Server üzerinde dosyayı kaydederken herhangi bir isim çakışması olmaması adına dosya adı GUID ve mevcut tarih saat bilgisinden oluşur. filePath, server'a kaydedeceğimiz dosyanın tam(fiziksel) dosya yoludur. Dosyanın hangi dosya klasörüne kaydedileceğini {dosyaYolu + dosyaAdı} birleşimi ile "System.IO.Path.Combine(context.Server.MapPath("/upload"), imageFileName);" kodunu kullanarak belirliyoruz.

3. Adım

public void ProcessRequest(HttpContext context)
{
    try
    {
        Dummy dummy = new Dummy();

        HttpPostedFile filePosted = context.Request.Files["images"];
        if (filePosted != null && filePosted.ContentLength > 0)
        {
            string imageFileName = "";
            string fileNameApplication = System.IO.Path.GetFileName(filePosted.FileName);
            string fileExtensionApplication = System.IO.Path.GetExtension(fileNameApplication);

            imageFileName =
                Guid.NewGuid().ToString() +
                "_" +
                DateTime.UtcNow.ToString("yyyyMMddHHmmssfff") +
                fileExtensionApplication;

            string filePath = System.IO.Path.Combine(context.Server.MapPath("/upload"), imageFileName);

            if (fileNameApplication != String.Empty)
            {
                filePosted.SaveAs(filePath);
                string imageRootURL = string.Concat("/upload/", imageFileName);
            }
            else
                context.Response.Write(new JavaScriptSerializer().Serialize(dummy));
        }
        else
            context.Response.Write(new JavaScriptSerializer().Serialize(dummy));
    }
    catch
    {
        context.Response.Write(new JavaScriptSerializer().Serialize(new Dummy()));
    }
}

Client'dan gelen dosya adı boş değilse "if (fileNameApplication != String.Empty)" dosyamızı kaydetme işlemini yapıyoruz ve jQuery File Upload eklentisinin anlayacağı cevabı gönderiyoruz. Dosyayı kaydederken fiziksel path kullandık. Ancak client'a cevap döndürürken fiziksel dosya yolu yerine relative dosya yolu kullanacağız. Bunun için direkt Concat ile solution içerisinde bulunan upload klasörünü relative path olarak belirliyoruz.

4. Adım

public void ProcessRequest(HttpContext context)
{
    try
    {
        Dummy dummy = new Dummy();

        HttpPostedFile filePosted = context.Request.Files["images"];
        if (filePosted != null && filePosted.ContentLength > 0)
        {
            string imageFileName = "";
            string fileNameApplication = System.IO.Path.GetFileName(filePosted.FileName);
            string fileExtensionApplication = System.IO.Path.GetExtension(fileNameApplication);

            imageFileName =
                Guid.NewGuid().ToString() +
                "_" +
                DateTime.UtcNow.ToString("yyyyMMddHHmmssfff") +
                fileExtensionApplication;

            string filePath = System.IO.Path.Combine(context.Server.MapPath("/upload"), imageFileName);

            if (fileNameApplication != String.Empty)
            {
                filePosted.SaveAs(filePath);
                string imageRootURL = string.Concat("/upload/", imageFileName);
								
		//  Query File Upload eklentisinin callback parametreleri
                DummyImage di = new DummyImage()
                {
                    deleteType = "DELETE",
                    deleteUrl = null,
                    name = "JQUERY FILE UPLOAD İLE ÇOKLU RESİM YÜKLEME VE SERVER-SIDE ENTEGRASYONU - " + DateTime.UtcNow.ToString(),
                    size = filePosted.ContentLength,
                    thumbnailUrl = imageRootURL,
                    type = fileExtensionApplication,
                    url = imageRootURL
                };

                dummy.files.Add(di);
                context.Response.Write(new JavaScriptSerializer().Serialize(dummy));
            }
            else
                context.Response.Write(new JavaScriptSerializer().Serialize(dummy));
        }
        else
            context.Response.Write(new JavaScriptSerializer().Serialize(dummy));
    }
    catch
    {
        context.Response.Write(new JavaScriptSerializer().Serialize(new Dummy()));
    }
}

DummyImage sınıfından bir nesne tanımlayarak jQuery File Upload eklentisinin yorumlayabileceği parametreleri dolduruyoruz. Parametrelerin açıklamalarını aşağıda bulabilirsiniz.

deleteType: Yüklenen dosyayı serverdan silmek için kullanılan request tipi.

deleteUrl: Yüklenen dosyayı serverdan silerken kullanılacak olan servis URL'i

name: Client'ın göreceği yüklenen dosyanın başlığı. (Server da kaydedilen dosya adı değil)

size: Dosyanın boyutu

thumbnailUrl: Yüklenen dosyaların liste olarak gösterileceği ekrandaki küçük resmin URL'i

type: Dosya uzantısı

url: Dosyanın relative path'i






Uygulamayı Çalıştırdıktan Sonra Elde Edilen Ekran Görüntüleri

JQUERY FILE UPLOAD İLE ÇOKLU RESİM YÜKLEME VE SERVER-SIDE ENTEGRASYONU

Uygulamayı çalıştırdıktan sonra Dosya Ekle butonu ile 4 tane resim dosyası seçildi.

JQUERY FILE UPLOAD İLE ÇOKLU RESİM YÜKLEME VE SERVER-SIDE ENTEGRASYONU

Seçilen resim dosyalarını kaydetmek için başlat tuşuna basıldı ve dosyalar server'a kaydedildi.

JQUERY FILE UPLOAD İLE ÇOKLU RESİM YÜKLEME VE SERVER-SIDE ENTEGRASYONU

Son olarak kaydedilen dosyalar jQuery File Upload eklentisine entegre Blueimp Gallery ile önizlenebilir. Blueimp Gallery eklentisinin yapımcısı, jQuery File Upload eklentisinin yapımcısı ile aynıdır. Responsive'i destekleyen bir yapıya sahiptir ve drag-swipe'ı destekler.

Bu yazımda elimden geldiğince sizlere bir JavaScript eklentisi olan jQuery File Upload eklentisinden bahsetmeye çalıştım. Bu uygulamanın kaynak kodlarını buraya tıklayarak indirebilirsiniz. Herhangi bir sorunuz, eleştiriniz veya görüşünüz varsa bu gönderinin altına yorum yapabilirsiniz veya buradan bana mesaj gönderebilirsiniz.

Bu gönderiyi paylaşın


Yorumlar (0)

Yorum Yapın