Asp.NET ile Çoklu Resim Yükleme ve Boyutlandırma

Asp.NET ile Çoklu Resim Yükleme ve Boyutlandırma yapabilen web form uygulaması geliştiriyoruz.

Merhaba arkadaşlar,

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

1-) Şimdi Sql Server 2008 yazılımını çalıştırıp yeni bir veri tabanı oluşturarak uygulamamızı geliştirmeye başlıyalım.



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 sini btnResimYukle 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.




8-) 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.

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.




Uygulamamızı tamamladık arkadaşlar,bir sonraki makalemizde görüşmek üzere hoşçakalın..


  • Etiketler;
Burak Kırbağ
Dijilive
Yorum Yaz

Yorum yazabilmek için üye girişi yapmanız gerekiyor!

Çok hoş bir makale. Ve çok anlaşılır. Paylaşım için teşekkürler...
emeğine sağlık bide javascript dosyası indirilmiyor ililenirsen sevinirim
Merhaba,dosyayı yeniden yükledim [url=http://www.dijilive.com/uploads/js.rar]buradan[/url] indirebilirsiniz.
Merhaba, javascript dosyasına [url=http://www.dijilive.com/uploads/js.rar]buradan[/url],uygulamaya ise [url=http://www.sanalkurs.net/zip/6380.rar]buradan [/url]ulaşabilirsiniz.
Paylaşımın için teşekkür ederim çok yardımcı oldu projemde.
merhaba dosyayı indiremiyorum hata veriyor ilgilenirseniz sevinirim
belirtilen boyutlardan daha küçük boyutta bir resim eklendiğinde hata meydana geliyor bunu nasıl giderebiliriz?
Merhaba şöyle bir sıkıntıda oluşuyor. Resim kaydedildiğinde, orjinal resimden daha büyük boyutlu kaydediliyor. Bunun sebebi nedir acaba? Örneğin Resimler klasöründeki 1024x768 resmi, yukarıdaki kodla 800x600'a daha küçük boyutlandırmasına rağmen, 700 kb olan orjinal resim 1mb civarında kaydediyor. Bu ufak problemi nasıl giderebiliriz?
Öncelikle makale için çok teşekkürler çok faydalı bir paylaşım olmuş.Ama bir konuda yardım isteyecektim resimlerin yeniden boyutlandırılmış halini veritabanına nasıl kaydedebiliriz
öncelikle makale için çok teşekkürler çok faydalı olmuş.Ama beim sorum olacak resimlerin yeniden boyutlandırılmış halini veritabanına nasıl kaydedebiliriz
[img]http://resim.sanalkurs.net/uploads/vtkaydet.jpg[/img] Bu kod satırları ile resmin adını veri tabanına kayıt ediyor zaten.Tüm boyutlardaki resimlerin adları aynı olduğu için sadece resmin adını veri tabanında tutup,çağırırken saklandığı klasör isimlerini belirtmemiz yeterli oluyor. 150px boyutundaki resim için img src="Resimler/150px/veri_tabanindaki_resim_adi" 800px boyutundaki resim için img src="Resimler/800px/veri_tabanindaki_resim_adi"
arkadaşlar <asp:fileupload class="multi" özelliği çalışmıyor neden hangi ayarı unutuyorum
bende şu satırda hata veriyor: [code]// Orjinal resmi kaydet file.SaveAs(Server.MapPath("~/resimler/" + resimadi));[/code]
js dosyalarını indiremedim hata veriyo rica etsem nasıl elde edebilirim
eline sağlık çok güzel bir çalışma fakat hatalarıda giderirp tekrar yayınlarsan daha çok mutlu olacağız. Benim aldığım hata [code] // Orjinal resim Bitmap resim2 = new Bitmap(Server.MapPath("~/Resimler/Temp/" + resimadi)); // 800px genişlikte yeni resim oluştur resim2 = this.ResimBoyutlandir(resim2, 800);[/code] çözüm sunarsan sevinirim.
Hocam herşeyi tamamladım fakat veritabanına bir türlü yükleyemedim. Lütfen yardımcı olurmusunuz...!
Merhaba js dosyalarına erişemiyorum yardımcı olursanız sevinirim

Yukarı Git