Mvc Ajax Resim Yükleme Upload Nasıl Yapılır

Editör 21.03.2017 18:36 Asp.Net Mvc
Mvc Ajax Resim Yükleme Upload Nasıl Yapılır

Ajax ile sayfayı yenileme işlemi yapmadan resim upload nasıl yapılacağı ile ilgili kodlar aşağıdadır.

View'de ki kodlar

<input type="file" id="FileUpload1" />  
<input type="button" id="btnUpload" value="Dosya Yükle" />  

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>  
<script>  
$(document).ready(function(){  
    $('#btnUpload').click(function () {  

        if (window.FormData !== undefined) {  

            var fileUpload = $("#FileUpload1").get(0);  
            var files = fileUpload.files;  

            var fileData = new FormData();  

            for (var i = 0; i < files.length; i++) {  
                fileData.append(files[i].name, files[i]);  
            }  

            fileData.append('username', ‘aspnetWebsite’);  

            $.ajax({  
                url: '/Home/DosyaYukle',  
                type: "POST",  
                contentType: false,  
                processData: false, 
                data: fileData,  
                success: function (result) {  
                    alert(result);  
                },  
                error: function (err) {  
                    alert(err.statusText);  
                }  
            });  
        } else {  
            alert("Form Data desteklenmiyor.");  
        }  
    });  
});  
</script>  

Controller'daki kodlar

[HttpPost]  
public JsonResult DosyaYukle()  
{  
    var yazilimsozluk = Request.Form.ToString().Split('=')[1];
    if (Request.Files.Count > 0)  
    {  
        try  
        {  
            HttpFileCollectionBase files = Request.Files;  
            for (int i = 0; i < files.Count; i++)  
            {  

                HttpPostedFileBase file = files[i];  
                string fname;  

                if (Request.Browser.Browser.ToUpper() == "IE" || Request.Browser.Browser.ToUpper() == "INTERNETEXPLORER")  
                {  
                    string[] testfiles = file.FileName.Split(new char[] { '\\' });  
                    fname = testfiles[testfiles.Length - 1];  
                }  
                else  
                {  
                    fname = file.FileName;  
                }  

                fname = Path.Combine(Server.MapPath("~/Uploads/"), fname);  
                file.SaveAs(fname);  
            }  
            return Json("Dosya Yükleme Başarılı"); //buradan dosya adını view'e gonderip oradan yüklediğiniz resmi basabilirsiniz.  
        }  
        catch (Exception ex)  
        {  
            return Json("Hata Oluştu:  " + ex.Message);  
        }  
    }  
    else  
    {  
        return Json("Dosya seçilmedi");  
    }  
}  

Success kısmından şu komutu yazarsanız

$('#ResimImgSrc').attr('src', "https://domain.com/Upload/" + response);

Dönen resmi sayfada göstermenize yarar

Bunlarada Bakabilirsiniz