mehmetduran.com - Paylaşmak Güzeldir...
Asp.net MVC'de Dosya Upload İşlemleri (Multi Uploading)
Bu yazımda MVC ile dosya upload işlemlerini nasıl gerçekleştireceğimizi göstereceğim. Göstereceğim yöntemle hem tek bir dosyayı hem de çoklu dosyayı upload edebileceğiz. Ayrıca dosya upload kontrollerini de dinamik olarak kullanıcı oluşturabilecek ve bunu jQuery ile yani javascript ile yapacağız. Bu şekilde servera az yük binmiş olacak. Server sadece gelen dosya upload isteklerini karşılayıp, dosyaları alacak. Oldukça kullanışlı ve esnek bir yapı. Bloğumda yer alan "Fotoğraflarım" bölümünü tamamen bu şekilde oluşturmaktayım. Şimdi bu upload (multi upload) olayını MVC ile nasıl yapacağımıza bakalım.

Öncelikle html tarafta yazacağımız script ve html kodlara bakalım. Multiupload için file kontrollerini dinamik olarak script ile (jQuery ile) oluşturacağız. Böylece çok kullanışlı bir uygulama hazırlamış oluyoruz. Dinamik olarak fileupload kontrolü oluşturan script kodlarımız ve html kodlarımız şöyle olmalı.

// jQuery kodlarımız
<script type="text/javascript">
    $(function() {
        $("#adet").append("<option value='0'>Dosya Adeti Seçiniz...</option>");
        for (var i = 1; i <= 20; i++) {
            $("#adet").append("<option value='" + i + "'>" + i + "</option>");
        }
        $("#adet").change(function() {
            var adet = $("#adet").val();
            $("#files").html("");
            for (var i = 0; i < adet; i++) {
                $("#files").append("<p><input type='file' name='file_"+i+"'></p>");
            }
        });
    });
</script>
 
 
// Html Kodlarımız
<% Html.BeginForm("Upload", "Home", FormMethod.Post, new { @enctype = "multipart/form-data", @id = "form" }); %>
    <select id="adet"></select>
    <div id="files"></div>
    <input type="submit" value="Gönder"><%= ViewData["sonuc"] %>
<% Html.EndForm(); %>
 

Script ve html kodlarımızdan sonra serverda oluşturduğumuz kontrollerin değerlerini alıp, dosyaları upload edecek olan Controller metodumuz ise şu şekilde olmalı.

 
// Server taraflı Controller kodlarımız
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Upload()
{
  foreach (string name in Request.Files)
  {
    var file = Request.Files[name];
    file.SaveAs(Server.MapPath("~/" + file.FileName));
  }
  ViewData["sonuc"] = "Kayıtlar Başarılı.";
  return View();
}
 

Fileupload kontrollerini dinamik olarak jQuery ile oluşturmak dışında el ile sabit sayıda oluşturabilir ve kullanbiliriz. Bunun için yapmamız gereken sadece html kodlarımızı aşağıdaki gibi oluşturmak.

 
// Sabit sayıda Fileupload nesnesi için Html Kodlarımız (örnek kodlar için 3 adet)
<% Html.BeginForm("Upload", "Home", FormMethod.Post, new { @enctype = "multipart/form-data", @id = "form" }); %>
    <input type='file' name='file1'>
    <input type='file' name='file2'>
    <input type='file' name='file3'>
    <input type="submit" value="Gönder"><%= ViewData["sonuc"] %>
<% Html.EndForm(); %> 
 

Görüldüğü gibi bu şekilde tekli veya çoklu upload işlemlerini MVC'de gerçekleştirebiliyoruz. Bu yöntem ile "Fotoğraflarım" bölümünü hazırladım ve kullanıyorum. Aşağıda örnek ekran görüntüsünü görebilirsiniz.

Asp.net MVC'de Dosya Upload İşlemleri (Multi Uploading)

İyi Çalışmalar.
Mehmet Duran 05 Ağustos Çarşamba 2009 18 34450 4,3
Asp.net MVC Asp.net jQuery Javascript Jquery Upload Multi Upload MVC Controller Dosya Tanıtım
Bookmark and Share
Bu Yazıyı Değerlendirin.
Konuyla İlgili Olabilecek Diğer Yazılar Microsoft Yaz Okulu Projemiz - Cengaver Asp.net MVC Areas (Birden Fazla Proje Kullanarak) Jquery ile LightBox Slayt Uygulaması Okul ve Projeler Jquery E-book
Yorumlar
Yorum Yaz
RSS Yorum Takibi
Mazhar KAYAOĞLU 07 Ağustos Cuma 2009 13:57 #1
Mehmet merhaba iyi çalışmalar.MVC de asp.net compenentlerini kullanırken (datalist,repeater) form tagini kullanmamız gerekiyor mu bunları kullanmak mvc yapısına ters mi?
sinan özkan 07 Ağustos Cuma 2009 22:03 #2
ellerine sağlık mehmet güzel paylaşım işimize yarar.
Mehmet Duran 07 Ağustos Cuma 2009 22:34 #3
@Mazhar, MVC ile tüm kontroller kullanılabiliyor (form tagı arasına eklemek ve bu forma runat=server özelliği vermek koşuluyla). Ama dediğin gibi gridview, button vb., gibi kontrollerde viewstate açılmış oluyor ve yaptığımız iş bana göre MVC ile uyuşmuyor. MVC için kontroller oluşturulmuş ve Html. diyerek bu kontrolleri kullanabiliyoruz. MVC 2.0 ile bunların sayısı da artmış durumda. Data kontrolleri için repeater kullanmakta sakınca yok gibi ama aynı işi MVC'ye uygun olacak biçimde for veya foreach döngüsüyle beraber nesneleri kullanarak yapmak daha mantıklı.
Mazhar KAYAOĞLU 08 Ağustos Cumartesi 2009 16:25 #4
Peki Mehmet sen kendi bloğunda nasıl bir yol izledin repeater mı kullandın? Yoksa for ve foreach yapılarını mı kullandın.
Mehmet Duran 09 Ağustos Pazar 2009 01:34 #5
Bloğumda iki yöntemi de kullandım. Ancak fırsat buldukça düzenlemeler yapıyorum ve hazır kontrolleri kaldırarak döngülerle işlerimi gerçekleştiriyorum. Ancak döngü ile repeater kullanmak arasında fark yok gibi. Repeater dediğimiz gelen data kadar döngüye girip itemtemplate bölümünü yazdıran bir kontrol. Döngü ile de aynı işi yapıyoruz. Bu bakımdan repeater veya döngü kullanmak arasında pek fark olmasa gerek.
Mazhar KAYAOĞLU 09 Ağustos Pazar 2009 06:56 #6
Teşekkürler Mehmet iyi çalışmalar.
Cengiz 20 Ekim Salı 2009 17:36 #7
Merhaba mehmet çalışmalarında başarılar diliyorum. Ve kesinlikle üzerinde deneme yaptığını düşündüğüm bir konuda senden yardım istiyorum. Facebox uygulaması ile fileupload yada input file kullanarak resimleri sunucuya göndermek istiyorum. Fakat nasıl bir yol izleyeceğim konusunda hiçbir fikrim yok. Araştırma yapıyorum ama bu konuda öyle ahım şahım bir döküman yada uygulama bulamadım. Bu konuda bir mantık yada kütüphane tavsiye edersen sevinirim kolay gelsin.
Mehmet Duran 20 Ekim Salı 2009 20:23 #8
Merhaba. Bu konuda yaptığım örnekler burada paylaştığım gibi. Facebox ile bu türlü bir uygulama yapmadım ama buradakileri facebox ile yapmak için sadece html kodları Facebox içine gömmek gerekiyor. Ancak tamamen Ajax ile yapılması için kullanılan birkaç script kütüphanesi var. Bunlar script ile frame oluşturarak dosyaları gönderiyorlar. "Ajax upload" olarak google'da arama yaparsan kullanılan yöntemleri ve kütüphaneleri bulabilirsin.
Ogan Tabanlı 26 Kasım Perşembe 2009 06:51 #9
Teşekkürler güzel bilgi ancak keşke uygulamanın downloadınıda koysaydın...
Serdar Durbarış 01 Aralık Salı 2009 01:11 #10
Merhaba Mehmet öncelikle eline sağlı kgüzel bir proje fakat benim aklıma şu takıldı burada yolladığımız verileri bir db ye kaydetmek istersek bunu nasıl gerçekleştireceğiz örneğin bir ürünler tablosu var ve burada resimlere ait resim1,... resim5 şeklinde 5 kolon var ve ürünün detayları. bu durumda bu projeyi nasıl değiştirebiliriz? Şimdiden teşekkürler
Mehmet Duran 01 Aralık Salı 2009 11:16 #11
Veritabanına kayıt için Upload action'ı içinde resimleri kaydettiğimiz gibi istediğin değerleri alarak veritabanına da kaydedebilirsin. Burada buna benzer bir kod paylaşmıştım. Binary olarak dosyaları veritabanına nasıl aktarılacağını belirtmiştim. Umarım yardımcı olur.
Serdar Durbarış 01 Aralık Salı 2009 19:54 #12
tamamdır en kısa sürede deneyeceğim teşekkürler :)
Hasan TEPE 08 Temmuz Perşembe 2010 00:31 #13
Arkadaşım ciddi anlamda büyük paylaşımların var umarım bu böyle devam eder ve de teşekkürü bir borç bilirim. Sorum şu yukarıdaki olayı (file upload) asp.net tarafında compenent kullanmadan nasıl yapabilirim.Ciddi anlamda yardıma ihtiyacım var. Hayırlı geceler.
Mehmet Duran 08 Temmuz Perşembe 2010 00:37 #14
Merhaba. Verdiğim kodlarda herhangi bir ek araç kullanılmadı. Direk olarak bir proje açıp bu kodlamaları yapabilirsin. Tek ihtiyaç script tarafta işlemleri kolay yapabilmek adına jQuery kütüphanesidir. Daha önce buradaki yazımda anlattığım ve paylaştığım örnek fikir verebilir. İncelemeni tavsiye ederim.
Barış Geçer 16 Ağustos Pazartesi 2010 16:37 #15
Merhaba, bu yöntemi asp.net mvc de gayet sorunsuz kullanıyordum.Ancak geçenlerde bi sıkıntıyla karşılaştım.Dosya boyutu artınca (5-10 mb) olunca post ettikten sonra şöyle bir hata alıyorum:Bu web sayfası kullanılamıyor. http://**********/49 adresindeki web sayfası, geçici olarak kullanılamıyor veya kalıcı olarak yeni bir web adresine taşınmış olabilir. vs. vs. Bunu google chromeda aldım diğer tarayıcılarda da benzer hatalar veriyor.Bir çözüm öneriniz var mı?
Mehmet Duran 16 Ağustos Pazartesi 2010 17:57 #16
Merhaba. Bu sorun proje için default ayarların kullanılmasından kaynaklanıyor sanırım. Default olarak da dosya boyutu 4mb olarak geliyor. Bunun için projedeki web.config dosyasında kendi ayarlarımızı vermemiz gerekiyor. Buradaki yazımda bu konuya değinmiştim.
elif 11 Ekim Pazartesi 2010 15:09 #17
bu örneklerin hazır bir şekilde verebilirmisinz download etsek ?
Mehmet Duran 13 Ekim Çarşamba 2010 16:23 #18
@elif, buradaki yazımda paylaştığım örneği inceleyebilirsin.
İsim :
Site :
Yorum :

Buradan bu yazıya ait yorumları RSS olarak takip edebilirsiniz.

Bu servis ile yazılara eklenen yorumları RSS ile takip ederek konu ile ilgili başkaları tarafından yapılan yorumları veya konuyla ilgili sorduğunuz sorulara verilen cevapları görebilirsiniz.
Kimse sana senden iyi öğüt veremez.
Bölümler
Yazılar
Arşiv
Arama
Linkler
Site İçi Arama
Son Zamanlarda Ne Yapıyorum ?
İstatistikler - Araçlar - Reklam
İstatistikler
Sayaç
Mehmet Duran | mehmetduran.com | Copyright © 2009