загрузка файла через Ajax, с отображением его на стороне клиента

.

В предыдущем уроке мы загружали файл на сервер через Ajax, после чего получали сообщение об успешной загрузке фалов, сейчас же мы продвинемся дальше, вместо чтобы получать такое сообщение, мы отобразим загруженный файл на стороне клиента. Почти все тоже самое, только теперь Json возвращает не только путь к файлу, но и текстовую строку в которой хранит сообщение об успешной загрузке файла. Это сообщение мы будем получать со стороны клиента, в целях демонстрации того, как можно передавать в FormData несколько значений.




Вот так выглядит контроллер:

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

Ну и для корректного отображения этого всего на стороне клиента, стилизуем css стилями:

Запустим проект и увидим визуализацию объекта, в область которого будет загружен файл:

загружаем загрузка файла через Ajax, с отображением его на стороне клиента

Нажимаем по надписи «Загрузить файл», и на сервер отправляется загруженный файл, после чего отображается у вас в браузере и вы получаете сообщение об успешной загрузке файла:

файл загружен загрузка файла через Ajax, с отображением его на стороне клиента