ASP.NET MVC Çoklu Resim Yükleme

Asp.Net MVC’de birden fazla resimleri klasöre kaydetmek ve aynı zamanda resimleri veri tabanındaki tabloya eklemek için kolay ve kullanışlı bir yöntem var.

 <input type=”file” class=”multi” name=”ChosenFiles” />    //Birden Çok Resim Seçmek İçin

Input sayesinde istediğimiz kadar resim seçebiliriz. Resimleri seçtikten sonra input’un altında resimlerin adları gelmektedir. Daha sonra bu verileri Html.BeginForm veya başka bir metot aracılığıyla (Ajax ile olabilir)  Controller’a göndermemiz gerekmektir.

Şimdi Controller kısmına gelelim.

Dikkat edilmesi gereken bir husus var. ActionResult’a gelen parametrenin ismi ( örn: ChosenFiles ) input’un name değeri ile aynı olması gerekmektedir.

Bir Foreach döngüsü sayesinde sırasıyla resimleri klasöre kaydedip ve aynı zamanda resimlerin isimlerini veri tabanındaki tabloya kaydediyoruz.

 

Takipte Kalın 🙂
Bu yazı Asp.net MVC, Bilişim kategorisine gönderilmiş ve , , ile etiketlenmiş. Kalıcı bağlantıyı yer imlerinize ekleyin.

ASP.NET MVC Çoklu Resim Yükleme için 17 cevap

  1. Veysel BASKANİ der ki:

    Selamın aleyküm bu islemleri yaptım fakat bi yerde olmuyor nasil yardimci olabilirsiniz

    • smldgn der ki:

      aleyküm selam, tabiki yardımcı olurum seve seve fakat nerede hata alıyorsunuz veri tabanına eklerken mi yoksa farklı bir yerde mi ? Screenshot atabilir misiniz ?

  2. Esra der ki:

    IlanListele sayfasında foreachle o resimleri görebilmem için neyi dönmem lazım?

    • smldgn der ki:

      Eğer resimleri başarıyla veritabanına yüklediyseniz;
      İlana göre resimleri getirmeniz gerekir, Resimler tablosu açarsınız veritabanında kolonlar şu şekilde olur ;
      resim_id , resim_url , ilan_id (tabi ilan_id yabancı anahtar olacak.)

      IlanDetay veya IlanListele controller’ında IlanID’si 1 olanın ilan fotoğrafları gelsin return View(db.Ilanlar.Include(“Resimler).Where(x=>x.ilan_id==1).Tolist();

      View kısmında ise Ilanları çağırmanız yeterli yani şöyle
      foreach( var item in Model.Ilanlar)
      {
      @foreach (var photo in item.Ilanlar)
      {
      /Content/images/@photo.photo_url”> //Burası örnek

      }
      }
      Bu şekilde yaparsanız çok güzel olur, buradan detaylı olarak anlamadıysanız Mail yardımıyla çok daha detaylı anlatabilirim isterseniz. Geri dönüşünüzü heyecanla bekliyorum

  3. ertugrul der ki:

    kardeş detaylarda yazı aralarında çoklu resimi nasıl getirebilirim ???
    https://i.hizliresim.com/y6DoMM.jpg

    • smldgn der ki:

      Merhaba, MakaleResimler adında yeni bir tablo açalım.
      MakaleResimID
      MakaleResimIsmi
      MakaleID

      Tablonun gerekli alanları bu şekilde olması gerekiyor. Ayrıca MakaleID yabancı anahtar olması gerekiyor, Makaleler tablosundaki MakaleID PrimaryKey olacak.
      Daha sonra resimleri bu MakaleResimler adlı tabloya kaydedeceğiz.
      Yazı aralarında çoklu resimleri getirmek için ise yapılacak işlemler oldukça basit.

      MakaleDetayı controllerda
      db.Makaleler.Include(x=>x.MakaleResimler).Where(x=>x.MakaleID==id).FirstOrDefault()

      Makale Detay sayfasında ise önce Makale Detay yazılarını getirip daha sonra bir foreach döngüsü ile makale resimlerini getirebiliriz.


      @model Makaleler
      @item.MakaleGelisme
      @item.MakaleGelisme2
      @foreach(var item in Model.MakaleResimler)
      {
      img src="~/MakaleResimler/@item.MakaleResimIsmi"
      }
      @item.MakaleGelisme3

      Bu şekilde yazı aralarında istediğiniz resimleri getirebilirsiniz.

  4. Buğra der ki:

    Selam, emlak proje ödevim var bunu yapmaya çalışıyorum.
    foreach içinde kullandığımız db.savechange(); hata veriyor.
    foreach döngüsü dışına aldığımda hata kesiliyor fakat bir adet resimi db ye kayıt ediyor. Upload işleminde problem yok, resimleri upload ediyor ama bir adet resimi dbye kayıt ediyor.

    • smldgn der ki:

      Merhaba, hatayı anlamış bulunmaktayım. Photos pd = new Photos(); kod satırını foreach içine alabilir misiniz ? Foreach döngüsünün içinde en başta olması gerekmektedir. Bu şekilde her bir fotoğraf için veritabanına her bir resim kaydedilecektir. Aklıma gelen ilk çözüm budur.


      foreach(var item in ChosenFiles)
      {
      Photos pd = new Photos();
      .
      .
      }

      şeklinde. Bir deneyelim olmazsa tekrardan iletişim haline geçelim Buğra Bey. Saygılarımla

      • Buğra der ki:

        Teşekkür ederim İsmail Bey, şu an kayıt etti ve detaylar sayfasında @foreach(var item in Model.MakaleResimler)
        {
        img src=”~/MakaleResimler/@item.MakaleResimIsmi”
        }

        şu kod sayesinde listeme yaptı fakat linkler bozuk yani linkler şu şekilde geliyor, “http://localhost:56893/Content/Images/System.Collections.Generic.HashSet%601[sozlukuygulamasi.Models.resimler]”

        benim kullandığım resimler veritabanı detaylarda kullandığım veritabanında değil

        @model sozlukuygulamasi.Models.sozluk

        bunun içerisinde resimler farklı bir model onu ekliyorum hata veriyor linkler gelmiyor öyle diyiyim.

  5. Dark der ki:

    Merhaba İsmail Bey, yönlendirmeleriniz sayesinde Create kısmında çoklu resim yükleme olayını hallettim fakat edit kısmında takılıyorum, eğer edit yaparken boş geçersem hata alıyorum eklerken resim eklemeye devam ediyor edit kısmında ne yapmalıyız bitaz açar mısınız?

  6. Kerem der ki:

    Çok Yardımcı oldu Teşekkürler.

  7. Baran Bulut der ki:

    Merhaba,
    Ben blog sayfası yapıyorum da şöyle bir sorum olacak. BlogController’da yeni gönderi oluştururken birden fazla resim seçip öyle veritabanına kayıt etmek istiyorum. Ve kayıt ettiğim bu gönderiyi de Home Index’te açmak istiyorum. Fakat bayadır uğraşıyorum ama hala çözemedim. Bir yardım ederseniz çok sevinirim.

    • Baran Bulut der ki:

      Sizin yukarıda yaptığınız kodlarla denedim fakat sadece server’a kayıt işlemi gerçekleşiyor. Server’dan geri çekemiyorum.

      • smldgn der ki:

        Server’dan çekmek için aslında veritabanına resimlerinizi kaydederken eklediğiniz resmin direk url’sini değilde sadece resimlerin isimlerini db’ye kaydederseniz daha sağlıklı olur. Örneğin; ornek.png diye db’ye kaydettiniz, ve bunu çekerken

        View sayfasında şu şekilde resimlerinizi çekebilirsiniz
        (foreach kullandığınızı varsayıyorum)
        (img url=”~/Resimler/@item.ImageUrl) diyerek resimlerinizi çekebilirsiniz.
        Dediğim gibi server’den bu şekilde bir yapıyla resimlerinizi kolayca çekebilirsiniz. Birde server’a okuma yazma yetkiniz olmayabilir bazen bu sebeplede resimler gelmeyebilir.

        Controller tarafında ise yani aslında veri tabanında, oluşturduğunuz yapıyı bilmiyorum ama kendi fikrim örneğin MakaleResimler adlı tablo açarak resimlerini oraya koymanız, MakaleID ile de bir foreign key sayesinde Makale tablonuzla ilişkilendirirsiniz. Bu sadece bir örnek.

        Aynı hata devam ederse bana mail atmaktan çekinmeyin. Dönüşünüzü beklemekteyim.

        Mail adresim: idogan@nuevo.com.tr

  8. batu der ki:

    merhaba ben birden fazla resim seçemiyorum yüklerken? tek sorunum o galiba

    • smldgn der ki:

      Merhabalar,
       input type="file" class="multi" name="ChosenFiles" /   
      bu şekilde kullandığınıza emin misiniz ?

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Alanı Doldurunuz! *