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.
Facebook Üzerinden Yorumlar