Asp.NET MVC’de Ajax İle Dosya Yükleme

Bu yazımızda Asp.NET MVC mimarisinde Ajax ile dosya yükleme(file upload) işlemini ele alacağız.Yazı içerisinde paylaşacağım bir adet jQuery kütüphanesi ile yapacağımız bu işlem sayesinde Ajax tabanlı çalışarak, dosyaları servera gönderebilecek ve bu esnada belirli kontroller sağlayabileceğiz.

Öncelikle edinmeniz gereken kütüphaneleri aşağıdan indiriniz.
jquery.form
http://code.jquery.com/jquery-1.12.0.min.js

Bir adet Asp.NET MVC projesi oluşturalım ve genel tasarımımızı aşağıdaki gibi dizayn edelim.

<html>
<head>
    <script src="~/scripts/jquery-1.10.2.js"></script>
    <script src="~/Content/jquery.form.js"></script>
</head>
<body>
    <input type="file" name="file" id="File" />
    <br />
    <input type="submit" value="Dosyayı Yükle" />
</body>
</html>

Şimdi yapmamız gereken, birazdan oluşturacağımız Ajax post neticesinde gelecek olan dosyayı tutacak olan bir Entity oluşturmaktır.

    public class Dosya
    {
        public HttpPostedFileBase File { get; set; }
    }

Ben Entity’nin ismine Dosya dedim.Siz istediğinizi diyebilirsiniz.Lakin burada dikkat etmeniz gereken, servera atılacak olan dosyayı barındıracak olan HttpPostedFileBase tipinden File isimli propertymizdir.Bu propertynin ismi View’de edilen POST üzerine gönderilecek dosyayı seçmemize yarayan file html elemanının id değeriyle aynı olmalıdır.Html elemanımıza dikkat ederseniz file elemanının id değeri File olduğu için, bu propertymizin id değerinide File olarak belirtmekteyiz.

Şimdi, Ajax ile dosyayı gönderebilmek için html tasarımımızda bir kaç komutluk işlem yapmamız gerekmektedir.

@model Dosya

<html>
<head>
    <script src="~/scripts/jquery-1.10.2.js"></script>
    <script src="~/Content/jquery.form.js"></script>
</head>
<body>
    @using (Html.BeginForm("DosyaYukle", "Home", FormMethod.Post, new { @id = "dosya_gonder_form" }))
    {
        <input type="file" name="file" id="File" />
        <br />
        <input type="submit" value="Dosyayı Yükle" />
    }
</body>
</html>

Gördüğünüz gibi BeginForm metodu ile bir form oluşturduk ve dosya yüklemeyle ilgili html elemanlarımızı bu form içine aldık.Ayriyetten sayfamızın model tipinide vermiş olduk.Burada dikkat edilmesi gereken nokta, forma verilen id değeridir.Bu id değeri üzerinden jQuery ve Ajax fonksiyonlarını devreye sokacağız ve POST – BACK işlemini engelleyeceğiz.

Şimdi DosyaYukle Action metodunu oluşturalım.

        [HttpPost()]
        public ActionResult DosyaYukle(Dosya Model)
        {
            string DosyaAdi = Model.File.FileName;
            Model.File.SaveAs(Server.MapPath("~/Content/Dosyalar/" + DosyaAdi));

            return View();
        }

Evet, gördüğünüz gibi DosyaYukle isimli Action metodumuzda yukarıdaki gibi tasarlanmaktadır.Tabi burada şunu söylemekte fayda var.Dosya yükleme işleminin yapılacağı formumuzda belirtilen Action metodumuz bu olduğu için, post edilen modeli(ki burada modelimiz fiziksel bir dosyayı barındırmaktadır) Dosya tipinden bir parametre girerek elde edebildiğimiz gibi, HttpPostedFileBase tipinden bir parametre girerek direkt olarak seçilen dosyayı yakalayacak olan nesneyide verebiliriz.

Yani yukarıdaki metodun bir başka varyasyonu aşağıdaki gibidir.

        public ActionResult DosyaYukle(HttpPostedFileBase File)
        {
            string DosyaAdi = File.FileName;
            File.SaveAs(Server.MapPath("~/Content/Dosyalar/" + DosyaAdi));
            return View();
        }

Action metodumuzuda oluşturduktan sonra sıra geldi jQuery komutlarıyla çalışmamızı gerçekleştirmeye…

<script>
        $(function () {
            $('#dosya_gonder_form').ajaxForm({
                beforeSubmit: ShowRequest,
                success: SubmitSuccesful,
                error: AjaxError
            });
        });
        // Form gönderilmeden önce tetiklenecek fonksiyon...
        function ShowRequest(formData, jqForm, options) {

        }
        // Eğer bir hata oluşursa bu fonksiyon tetiklenecektir...
        function AjaxError() {

        }
        // Form gönderdikten sonra, işlemler tamamlandıysa eğer
        // çalışacak olan bu fonksiyondur...
        function SubmitSuccesful(result, statusText) {
            // Result parametresi Controllerdan geri döndürüğümüz veridir.
            // statusText parametresi ise Ajax işlemleri başarılı ise true,
            // değilse false dönecektir.
        }
</script>

Yukarıdaki kod bloğunu incelerseniz eğer “dosya_gonder_form” id değerine sahip forma ajaxForm fonksiyonunu uygulamaktayız.Bunun yanında süreç esnasında çalışacak fonksiyonlarda yukarıda tanımlanmış ve gerekli açıklamaları yapılmıştır.

Asp.NET MVC'de Ajax İle Dosya Yükleme

Asp.NET MVC’de Ajax İle Dosya Yükleme

Gördüğünüz gibi Ajax ile dosya yükleme işlemimiz sorunsuz çalışmaktadır…

Sonraki yazılarımda görüşmek üzere…
İyi çalışmalar…

Bunlar da hoşunuza gidebilir...

5 Cevaplar

  1. B dedi ki:

    Teşekkürler

  2. Yasin dedi ki:

    Merhaba yüklenen bu dosyayı sayfada gostermeyi ve açmayı nasıl yapabilirim

  3. berkan dedi ki:

    formdaki verilerin tümünü yollamak için ne yapmalıyım resim artı inputtaki verileri

  4. murat dedi ki:

    Elinize sağlık. Peki yüklendiğini “Progresbar” ile nasıl gstere bilirim?

Bir cevap yazın

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

*

Copy Protected by Chetan's WP-Copyprotect.