Чтобы продемонстрировать на созданном в Axure прототипе элемент управления загрузки файлов можно остановиться на простой иллюстрации вида:
Этого в большинстве случаев достаточно.
Но иногда необходимо продемонстрировать дотошному клиенту весь процесс. И тогда можно воспользоватся удобной возможностью текстового поля. Или реализовать это с помощью встроенного JS-скрипта.
Вставка на страницу диалогового окна для загрузки файлов с помощью настроек текстового поля
1. Вставляем на страницу элемент Text Field
2. В инспекторе выбираем тип File для текстового поля
3. На сформированной странице после публикации видим вот такой результат:
4. При нажатии на кнопку будет показано диалоговое окно загрузки файла. После выбора файла надпись "Файл не выбран" будет заменена на имя файла.
Добавление диалогового окна для загрузки с помощью встроенного JS-скрипта
1. Создаем элементы управления для загрузки файла, например вот так:
2. На OnLoad страницы вешаем загрузку своего JS-скрипта
Как это сделать читаем здесь.
3. В JS-файл добавляем код:
var lblFileName;
function onStart() {
$('<input type="file" id="file_upload" style="display: none">').appendTo('body').change(readURL);
}
function readURL(e) {
if (this.files && this.files[0]) {
var reader = new FileReader();
reader.readAsDataURL(this.files[0]);
$('[data-label="' + lblFileName + '"]').html(this.files[0].name);
}
}
function loadFile(name) {
lblFileName = name;
$("#file_upload").trigger('click');
}
4. На кнопку "Загрузить файл" на OnClick вешаем Case и в окне его редактирования выбираем Links/Open Link/Current Window.
5. Далее отмечаем пункт "Link to an external url or file"
6. В текстовое поле вставляем код:
javascript:loadFile('lblFileName');void(0);
Где lblFileName — имя лейбла, в который выводим имя загружаемого
файла.
Как сделать анимированный индикатор загрузки можно прочитать здесь.
ПОДПИШИТЕСЬ НА НАШ КАНАЛ
Будет много интересного...
