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

.

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




Не забываем создать папку Files для хранения загруженных изображений. Preload загрузки в формате gif вы можете найти в интернете, есть даже специальные сайты которые генерируют такие изображения, например на этом сайте http://preloaders.net/ru. Картинку для удаления вы также можете сделать сами в photoshop или где нибудь скачать. И так начнем с кода контроллера:

Здесь все тоже самое что и в предыдущем уроке, только в метод UploadImage добавлена строка  Thread.Sleep(3000); , этот метод делает задержку загрузки изображения на сервер, потому как при загрузке изображения на ваш локальный компьютер, из за того что это будет происходить очень быстро, вы не увидите как крутиться колесико ожидания загрузки изображения.

Также добавлен метод  DeleteImage(){} , который отвечает за удаления изображения с сервера. Получаем имя файла из отправленного Ajax запроса со стороны клиента, и если искомый файл существует, делаем удаление.

Вот как выглядит страница представления Index.cshtml:

Css стили:

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

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

Выбираем файл, наблюдаем индикатор загрузки.

Прелоад Улучшаем загрузку изображений через Ajax с отображением на стороне клиента

Получаем сообщение об успешной загрузке файла.

ЩЛ Улучшаем загрузку изображений через Ajax с отображением на стороне клиента

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