ASP.NET MVC ile AJAX İle Dosya Yükleme

Bu örnek, ASP.NET MVC kullanarak bir web uygulamasında AJAX ile dosya yükleme işlemini göstermektedir. Kullanıcı, bir dosya seçip yüklemek istediğinde, sayfa yeniden yüklenmeden bu işlemi gerçekleştirebilir.

HTML Kısmı:

İlk olarak, dosya yükleme işlemi için bir HTML formu oluşturmalıyız. Aşağıda, bu formu ve yükleme düğmesini içeren örnek bir HTML kodu bulunmaktadır:

<form id="fileUploadForm" enctype="multipart/form-data">
    <input type="file" name="file" id="file" />
    <input type="button" value="Dosya Yükle" id="uploadButton" />
</form>
<div id="result"></div>

AJAX Kısmı:

Dosya yükleme işlemi için AJAX kullanarak iletişim kuracağız. jQuery kullanarak bu işlemi gerçekleştirebiliriz. Aşağıda, AJAX kodu örneği bulunmaktadır:

$(document).ready(function () {
    $("#uploadButton").click(function () {
        var formData = new FormData();
        formData.append("file", $("#file")[0].files[0]);

        $.ajax({
            url: "/ControllerName/UploadFile", // Controller adınızı ve işlem adınızı belirtin.
            type: "POST",
            data: formData,
            contentType: false,
            processData: false,
            success: function (response) {
                $("#result").html(response);
            },
            error: function () {
                alert("Dosya yükleme sırasında bir hata oluştu.");
            }
        });
    });
});

Controller Kısmı:

Şimdi, dosya yükleme işlemini karşılayacak bir Controller eylemi oluşturmalıyız. Controller'da, dosyanın yüklenmesi ve işlenmesi işlemlerini gerçekleştirebiliriz. Aşağıda, Controller tarafında örnek bir kod bulunmaktadır:

[HttpPost]
public ActionResult UploadFile(HttpPostedFileBase file)
{
    if (file != null && file.ContentLength > 0)
    {
        try
        {
            string fileName = Path.GetFileName(file.FileName);
            string path = Path.Combine(Server.MapPath("~/Uploads"), fileName);

            file.SaveAs(path);
            return Content("Dosya yüklendi: " + fileName);
        }
        catch (Exception ex)
        {
            return Content("Dosya yükleme hatası: " + ex.Message);
        }
    }
    else
    {
        return Content("Lütfen bir dosya seçin.");
    }
}

Bu örnek, kullanıcının dosya seçip yüklemesini ve sonucunu sayfada görüntülemesini sağlar. Controller'da dosyanın kaydedildiği dizini ve işleme yöntemini özelleştirebilirsiniz.

Kategoriler