Описание

На первой странице представлена таблица с данным о имеющихся изображениях: № п/п, имя файла с расширением, директорий расположения на сервере, размер файла и дата добавления. При визуализации данных предусмотрено постраничное их разбиение (пагинация). Предоставлена возможность пользователю сортировать данные таблицы по полю «дата добавления файла» в порядке возрастания/убывания. Для изображений, загруженных в течение последнего часа, использована подсветка, отличная от остальных строк. При наведении указателя мыши на ячейку с именем файла, показывается соответствующее ему изображение во всплывающем окне фиксированного размера. На странице для загрузки изображений размещены:
- элемент управления для передачи изображения на сервер;
- грид, содержащий превью, загруженных в текущей сессии изображений;
- контейнер, в котором будет показываться изображение в оригинальном размере при наведении курсором на элемент превью в гриде.
Реализован функционал:
1. Загрузка изображений выполняется асинхронно с помощью метода async Task<ActionResult> AddImage;
2. Допускается выбор нескольких изображений для загрузки (в контейнере показывать последний файл из списка загрузки); В целях кроссбраузерности добавлено 3 элемента с тэгом input на страницу.
3. Предусмотрена визуализация состояния операции загрузки в элементе с тэгом progress; Сам прогресс загрузки выполняется скриптом JQuery. Анализируется размер загружаемых файлов в запросе XMLHttpRequest.
4. Изображения хранятся в файловой системе на сервере;
5. Установлено ограничение для загружаемых файлов в 2Мб, выводится соответствующее уведомление пользователю с помощью скриптов JavaScript. При этом загрузка файла отменяется и поле на форме очищается
6. Предусмотрена возможность изменения директории для загрузки изображений без повторной публикации приложения в виде выпадающего списка с папками в корне проекта; По умолчанию выбрана папка Images.

Презентация проекта