MVC de Çoklu Dosya Upload Etme

WEB sayfalarında özellikle yönetim panellerinde dosya upload işlemi olmazsa olmazlarımızdandır. Resim dosyaları, ofis dosyaları v.s. farklı birçok dosya türünü upload etmek isteyebiliriz.. Bu işlemi yaparken her zaman tek dosya upload edilmeyebilir. Çoklu dosya upload işlemleri için Jquery imdadımıza yetişir.Öncelikle bir MVC projesi oluşturalım ve makale sonunda verdiğim lnkten indirdiğiniz Jquery dosyalarını Content klasörü oluşturup içine Kopyalayın. Jquery dosyaları aşağıdaki gibidir.

Şimdi “Home(Controller).cs” isminde Controller oluturalım ve Index  isimli bir View oluşturalım. Index dosyamızın head tagları arasına  bu Jquery dosyalarını tanıtalım.

<script src="~/Content/jquery.blockUI.js"></script>
<script src="~/Content/jquery.form.js"></script>
<script src="~/Content/jquery.js"></script>
<script src="~/Content/jquery.MetaData.js"></script>
<script src="~/Content/jquery.MultiFile.js"></script>
<script src="~/Content/jquery.MultiFile.pack.js"></script>
<script src="~/Content/jquery.validate.js"></script>

Body bölümü ise şöyle yapalım

@using (Html.BeginForm("Index", "Home", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
   <input type="file" class="multi" name="Dosyalar" /><br />
   <input type="submit" value="Dosyaları Yükle" />
}

Controlller görüntümüz ise şöyle olsun.

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }
    [HttpPost]
  public ActionResult Index(IEnumerable<HttpPostedFileBase> Dosyalar)
{
    foreach (var dosya in Dosyalar)
    {
        dosya.SaveAs(Server.MapPath("~/Dosyalar/" + dosya.FileName));
    }
    return RedirectToAction("Index");
}
}

İşte bu kadar. İnput tagı için farklı kullanımlarda mevcuttur.

    // İstenilen kadar dosya seçebilirsiniz.
    <input type="file" class="multi" name="Dosyalar" />
 
    // MaxLenght değeri kadar dosya seçebilirsiniz.
    <input type="file" class="multi" maxlength="4"  name="Dosyalar" />
//Accept özelliği ile istenilen dosya türü belirlenebilir. <input type="file" class="multi" accept="png|jpg" name="Dosyalar" />

Evet bu kadar. Jquery dosyalarını bu linkten indirebilirsiniz.İndir



Etiketler
Upload Multi HttpPostedFileBase
Mesaj Yaz