Как правильно загрузить файл через AJAX в ASP.NET MVC?

Форма:
<form id="fileUpload" action="@Url.Action("AddImage")" method="POST" enctype="multipart/form-data">
            <input id="fileInput" type="file" />
            <input type="submit" value="Upload file" id="btnFileUpload" />
        </form>
    </div>


Контролер:
[HttpPost]
        public ActionResult AddImage(HttpPostedFileBase image)
        {
            string fileName = image.FileName;
            image.SaveAs(Path.Combine(HttpContext.Current.Server.MapPath("/Images/"), fileName));
            return View("Index");
        }


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

        $.ajax({
            url: 'Home/AddImage',
            type: "POST",
            data: formData,
            contentType: false,
            processData: false,
            success: function () {
                alert("URA");
            }
        });
    });


Контролер всегда получает image = null. В чем может быть проблема?
  • Вопрос задан
  • 15454 просмотра
Решения вопроса 2
@NChervin
Ошибки во всех трех местах :)

1. В форме добавить аттрибут name для контрола

<input id="fileInput" name="fileInput" type="file" />


2. Код в контроллере

[HttpPost]
        public ActionResult AddImage()
        {
            HttpPostedFileBase image = Request.Files["fileInput"];
            
            if (image != null && image.ContentLength > 0 && !string.IsNullOrEmpty(image.FileName))
            {
                string fileName = image.FileName;
                image.SaveAs(Path.Combine(Server.MapPath("Images"), fileName));
            }

            return View("Index");
        }


3. В принципе без cкрипта можно и обойтись, все отправится и так, по нажатию на кнопку. Но если уж используется jQuery то вполне достаточно следующего:

$(document).ready(function () {
    $('#btnFileUpload').click(function() {
        $('#fileUpload').submit(function(event) {
            // обработка событий по отправке формы
        });
    });
});
Ответ написан
Комментировать
@Nokia7650
web developer
Ошибки есть. Вьюшку и контроллер немного надо изменить
вью:
<body>
    <div>
        <form id="fileUpload" action="@Url.Action("AddImage")" method="POST" enctype="multipart/form-data">
            <input id="fileInput" type="file" />
            <input type="button" value="Upload file" id="btnFileUpload" />
        </form>
    </div>
    
    <script type="text/javascript">

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

                $.ajax({
                    url: "Home/AddImage",
                    type: "POST",
                    data: formData,
                    contentType: false,
                    processData: false,
                    success: function() {
                        alert("URA");
                    }
                });
            });
        
    </script>
</body>


контроллер:

public ActionResult Index()
        {
            return View();
        }
        [HttpPost]
        public ActionResult AddImage(HttpPostedFileBase fileInput)
        {
            string fileName = fileInput.FileName;
            var image = new Bitmap(fileInput.InputStream, false);
            image.Save(Path.Combine(HttpContext.Server.MapPath("/Images/"), fileName));
            return View("Index");
        }
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
@ConstKosyanov
back-end разработчик
Но если очень хочется получить файл через jQuery то
var file = $('#fileInput').get()[0].files[0];
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы