Ajax ile Base64 Tipinde Resim Yükleme

Bu yazımda, Asp.Net Mvc’de ajax ile bir resmi nasıl upload ederiz onu anlatacağım.

Senaryomuz şöyle olacak, kullanıcı file tipindeki bir input ile bir resim dosyası seçecek ekle butonuna bastığında ise seçtiği resmi Ajax ile post edeceğiz.

View kısmı aşağıdaki gibi olacak.

İşin önemli kısmı olan javascript kodları aşağıdaki gibi olacak ayrıntılı olarak aşağıda açıklayacağım.

Kullanıcı dosya seçtiğinde, id’sine Resim verdiğimiz input’un change eventi tetikleniyor. İf şartı ile dosyanın var olup olmadığını kontrol ediyoruz birden çok resim yüklenebileceğinden this.files[0] ile biz sadece dizinin ilk dosyasını alıyoruz. reader adında FileReader nesnesi tanımlıyoruz. reader.onload, okuma işlemi tamamlanmadığından bu noktada çalışamıyor readAsDataUrl ile dosyayı url biçiminde başarılı bir şekilde okuduktan sonra onload çalışıyor ve runAjax isminde tanımladığımız fonksiyonu çağırıyor. Yazdığımız ajax methodu ile de dosyayı upload ediyoruz.

Şimdi de controller tarafında gönderdiğimiz veriyi sunucumuza kaydetmeye geldi. Öncelikle hangi resmi seçerseniz seçin baş kısmı aşağıdaki gibi olacaktır.

Gelen imgBase64 verisini byte dizisine dönüştürmeden önce resim tipiyle ilgili bilgi veren ilk 22 karakterini çıkarmamız gerekiyor çıkardıktan sonra byte dizisine çeviriyoruz filename değişkeni ile dosya ismi, savepath değişkeni ile de kaydedeceğimiz yolu tanımladıktan sonra belirttiğimiz yola resmimizi kaydediyoruz.

You may also like...

Leave a Reply

Your email address will not be published.

English