Bu makalede Jquery kütüphanesinden yararlanarak Asp.NET (C#) ile çoklu resim yüklüyebileceğimiz bir WebForm uygulaması yapacağız.
Uygulamamızın sahip olacağı özellikler:
- Çoklu resim yükleme
- Yükleme esnasında resimlerin boyutlandırılması
- Veri tabanına resim yollarının kaydedilmesi
ResimId : Her resim için bağımsız değer tutulur.Otomatik artan sayı ve birinci anahtar özellikleri belirlenir.
ResimYolu : Yüklenen resmin adının tutulacağı alan.
2-) Uygulamamızda kullanıcağımız dosyaları indirelim.
jquery.js : Javascript kütüphanesi.
multi.js : Javascript kütüphanesine ait çoklu dosya yükleme eklentisi.
3-) Visual Studio yazılımını çalıştırıp yeni bir Web Sitesi tanımlıyoruz.
4-) Projemizi oluşturduktan sonra indirdiğimiz dosyaları proje kök dizinine kopyalayalım ve resim dosyalarımızın tutulacağı dizinleri oluşturalım.
js : Javascript kütüphane ve eklentilerimizin bulunduğu klasör.
Resimler : Resim dosyalarımızın tutulacağı ana dizin.
150 : 150 pixel genişliğindeki resim dosyalarımızın tutulacağı dizin.
800 : 150 pixel genişliğindeki resim dosyalarımızın tutulacağı dizin.
Temp : Yüklenen orjinal resim dosyalarımızın tutulacağı dizin.
5-) Default.aspx sayfamızı açıp komponentlerimizi ekliyoruz.
FileUpload : Dosya yüklemek için. ID sini fileResimler olarak değiştirelim. Class ını multi olarak belirtiyoruz.
Buton : Resimlerimizi seçtikten sonra yükleme işlemini başlatmak için. ID sinibtnResimYukle olarak değiştirelim.
Label : Yüklenen dosyalarımızın bildirilmesi için. ID sini lblMesaj olarak değiştirelim.
6-) Default.aspx sayfamızın Source kısmına geçerek gerekli dosyalarımızı çağırıyoruz.
7-) Default.aspx.cs dosyasını açarak uygulamamızda kullanıcağımız C# kütüphanelerini projemize dahil ediyoruz.
Yüklediğimiz resimleri boyutlandırmak için kullanıcağımız ResimBoyutlandir adlı methodumuzu oluşturalım.
Methodumuz iki adet parametre alıyor ve geriye boyutlandırılmış resmimizi döndürüyor.
resim : Boyutlandırılacak olan orjinal resim.
boyut : Kullanılacak olan genişlik değeri.
ydeger : Kullanılacak olan yeni genişlik ve yükseklik değerleri.
yresim : Yeni oluşturulan resim.
9-) Şimdi btnResimYukle ID li butonumuza tıkladığımızda çalışacak olan resim yükleme kodlarımızı yazalım.
10-) Şimdi uygulamamızı çalıştırıp resim yüklemeyi deneyelim.
* Dört adet resim seçip Resim(leri) Yükle butonuna tıklıyoruz.
* Resimlerin yüklendiğini oluşturduğumuz Label komponentinde bize bildirdi.
* Temp klasörümüze seçtiğimiz resimler yüklendi ama 150 ve 800 isimli klasörlerimizin boş olduğunu görüyoruz çünkü ResimBoyutlandir isimli methodumuzu henüz kullanmadık.
11-) Dikkat ettiyseniz resimlerimizin ismi ingilizceye dönüşmüş olarak kaydedildi bunu jquery eklentimiz sağlamıştır.Ama aynı isimde dosya yükleme kalktığımızda problem oluşabileceği için resimlerin yüklenirken eşsiz bir isimde kaydedilmesi için gereken düzenlemeyi yapalım şimdide.
* Resim ad ve uzantılırımızın saklanacağı string değişkenlerimizi ana sınıfımız içerisinde oluşturalım.
* Resmin uzantısını uzanti adlı string değişkenimize atıyoruz.
* resimadi adlı string değişkenimizdede DateTime sınıfından yararlanarak benzersiz bir değer oluşturup sonunada resim uzantısını ekleyerek resmimize atanacak yeni adı oluşturuyoruz.
* Resmi resimadi değişkenindeki adla kaydetmek için kod satırımızdaki fileName yerine resimadi değişkenizi kullanıyoruz.
12-) Uygulamamızı yeniden çalıştırıp yeni yüklenen resimlerin isimlerine bakacak olursak değiştiğini göreceğiz.
13-) ResimBoyutlandir methodumuzu kullanarak resimlerimizi boyutlandıralım.
resim : Yeni bir bitmap nesnesi oluşturup yüklenen resmimizi bu nesneye atıyoruz.
resim : Oluşturduğumuz bitmap nesnesine 150px genişliğinde oluşturulan yeni resmi atıyoruz.
[b]resim.Save : Oluşturulan yeni resmi 150 adlı klasörümüze kaydediyoruz.
* 800px genişliğindeki resmin oluşturulması için kodumuzu biraz düzenliyoruz.
14-) Uygulamamızı çalıştırdığımızda yüklediğimiz resimlerin orjinallerinin yanında iki farklı boyutta (150px ve 800px genişliğinde) kopyalarının oluştuğunu görüyoruz.
* Temp klasörü
* 150 klasörü
* 800 klasörü
15-) Son adım olarak yüklenen resimlerinin adlarının veri tabanına kaydedilmesi için gereken kodları uygulamamıza ekleyelim.
16-) Uygulamamızı çalıştırdığımızda yüklenen resimlerin adlarının veri tabanına kaydedildiğini görüyoruz.
Kaynak dosyayı indirmek için tıklayın
Bu Yazı SanalKurs.NET sitesinden Burak KIRBAĞ tarafından yazılmıştır.
