Как загрузить изображение с помощью jQuery / AJAX на веб-сайт ASP.NET MVC?

Question

Я пытаюсь найти достойный способ, позволяющий пользователям загружать фотографию профиля на страницу редактирования профиля.

Я попробовал Загрузить , но, похоже, это не работает в некоторых из последних версий браузера Google Chrome.

В идеале, я просто хочу предложить пользователю возможность заменить изображение профиля заполнителя на собственное изображение с помощью простой кнопки загрузки (предпочтительно ajax), и после загрузки изображения отобразить «удалить ', чтобы удалить загруженную фотографию и восстановить заполнитель по умолчанию.

Существуют ли другие альтернативы, которые хорошо работают во всех основных браузерах и легко интегрируются в приложение MVC?

Answer 1

Загружать с помощью jQuery только с HTML 5, и не все браузеры способны на это.

Вы можете сделать что-то вроде этого.

Вам нужно иметь IFRAME, который будет использоваться для создания записи с файлом.

Как это:

<iframe id="targetUpload" name="targetUpload"></iframe>

В форме вы устанавливаете цель для iframe.

<form target="targetUpload" name="file" runat="server" method="post" id="file" enctype="multipart/form-data" action="@Url.Content("~/Controller/Upload")">

И кнопка отправки

<input type="Submit" value="Upload">

Это способ загрузки файлов без обновления страницы.

Вы можете обработать файлы перед загрузкой с помощью jquery. (Тип файла, размер и т. Д.)

И в вашем контроллере вы получаете файлы:

public ActionResult Upload(HttpPostedFileBase file)
        {
            if (file != null && file.ContentLength > 0)
            {
                //Save the file in the server path
                string savePath = Server.MapPath("~/Upload/");
                string fileName = file.FileName;
                savePath += fileName;
                file.SaveAs(savePath);
            }
          return RedirectToAction("Index");
        }