Merhaba arkadaşlar bugun sizler ile ajax kullanarak dosya yükleme işlemi yapacağız. 

Yükleme durumunu ise progressbar'a yansıtacağız.

Örneğimizi buradan indirip inceleyebilirsiniz.

Arkadaşlar öncelikle Controller'imize bir ActionResult ekleyelim.

        public ActionResult Index()
        {
            return View();
        }

Şimdi yükleme işlemi yapacağımız bir ActionResult gerekli. Hemen hazırlıklarımızı yapalım.

     [HttpPost]
        public void Upload(HttpPostedFileBase file)
        {
            //Dosya boş değil ise
            if (file != null)
            {
                //Dosya adı
                var DosyaAdi = file.FileName;

                //Yüklenecek klasor
                var YuklenecekKlasor = Server.MapPath("~/Upload");

                //Yüklenecek konum
                var Path = System.IO.Path.Combine(YuklenecekKlasor, DosyaAdi);

                //Dosyayı belirlenen yola kaydet
                file.SaveAs(Path);
            }
        }

Evet arkadaşlar geri planda çalışacak kodlarımızı tamamladık şimdi ActionResult'umuza bir View ekleme vakti geldi. Hemen ActionResult index() üzerine gelip sağ tık > Add view diyerek bir view ekleyelim..

Eklediğimiz View'e geçelim ve öncelikle ajax formumuzu oluşturalım.

  @using (Ajax.BeginForm("Upload", "HomeController", new AjaxOptions() { HttpMethod = "POST" }, new { enctype = "multipart/form-data" }))
  {
                       
  }

Arkadaşlar formumuzu baktığınızda Ajax.BeginForm ibaresini hemen fark etmişsinizdir.  Aldığı ilk parametre gideceği Action,Fonksiyon'dur. İkinci parametre ise Fonksiyonun bulunduğu Controller'dir.

Sonra ajax ayarlarını tanımlıyoruz ve dosya yükleme işlemleri için olmazsa olmazımız enctype = "multipart/form-data"yı da unutmuyoruz.

Şimdi dosya yükleme işlemi için formumuzun içine bir file input ve submit button lağzım. 

<input type="file" name="file">
<button type="submit">Yükle</button>

Yükleme işlemini takip edeceğimiz bir de progressbar işlevi görecek html kodlarımızı yazalım.

<div class="progress">
   <div class="progress-bar" style="background-color:green">
   </div>
</div>

Evet arkadaşlar sıra geldi yükleme işlemini takip edecek ve bizi bilgilendirecek scriptlerimizi yazmaya geldi.

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>

<script>
    (function () {
        //Html progressbar seçicisi
        var bar = $('.progress-bar');


        $('form').ajaxForm({

            //Yükleme işlemi başlamadan önce
            beforeSend: function () {
                //Progress bar başlangıç değeri
                var progressDegeri = '0%';

                // Progress bar genişliği
                bar.width(progressDegeri)

                // Progress bar içerisine yazılacak değer
                bar.html(progressDegeri);
            },

            //Yüklemi işlemi sırasında
            uploadProgress: function (event, position, total, percentComplete) {
                //Anlık Yükleme yüzdesi
                var progressDegeri = percentComplete + '%';

                //progress bar genişliğine yükleme yüzdesini ver
                bar.width(progressDegeri)

                //Progress bar içeriğine yükleme yüzdesini ver
                bar.html(progressDegeri);
            },

            //Yükleme işlemi başarılı olduğunda
            success: function () {

                //Yükleme max değeri
                var progressDegeri = '100%';

                //Progress bar genişliğini max olarak belirle
                bar.width(progressDegeri)

                //Progress bar içeriğine 100% yaz
                bar.html(progressDegeri);
            },

            //Yükleme işlemi bittiğinde
            complete: function (xhr) {
                alert("Yükleme işlemi tamamlandı")
            }
        });
    })();
</script>

Evet arkadaşlar yükleme işlemi için minimum gereklilikleri yazdım ve elimden geldiğince anlatmaya çalıştım.

Umarım sizler için faydalı olmuştur.

Saygılarımla Fatih BÜLBÜL.