Пришёл мне тут дизайн интересный. От пользователя требуется заполнение формы договора и upload картинок с паспорта и договора. Смотрите сами:
Для чего это надо - неважно, тут серьёзный сайт с серьёзными намерениями. Однако, посмотрите ещё раз на картинку. Ничего не замечаете? Upload сделан ссылками, а download - кнопкой! Это видимо новое слово в дизайне =)
Меня, как человека привыкшего, что инпут типа файл не позволяет с собой практически ничего делать это сначала ввело в сильное удивление. Однако, коллега подсказал, что на инпут типа файл таки можно повесить события или джаваскриптовый клик. Так что всё оказалось очень даже просто.
Намеренно я не буду писать так, как сделано у меня, только продемонстрирую решение. В проекте юзается jQuery, поэтому обращение с объектами ещё проще.
1. Формируем ссылочку, по нажатию на которую будем вызывать системный диалог выбора файла. Действие по умолчанию - войдовая функция, которая ничего не делает =) А вот на onClick вешаем функцию, которая выполняет клик по полю инпут типа файл. Писать код в свойстве ссылки - некрасиво, но мне лень городить функцию, поэтому пусть будет так.
2. Так как мы скроем поле инпут типа файл, то пользователь не поймёт что он выбрал файл. Поэтому нам надо как-то просигнализировать, что файлик был выбран, например, показывать хотя бы его имя. Будем его выводить вот в это поле (я не дизайнер, не надо меня бить тапками)
3. Создаём инпут типа файл, который и будет обрабатывать наши действия. Однако, скрываем его, так как нам по дизайну не положено =) На событие onChange вешаем сигнализацию =)
Самое главное, что ничего лишнего не надо обрабатывать. Данные приходят как от обычного инпута типа файл, ведь обработчик-то как раз оттуда...
ЗЫ не смогла найти адекватных аналогов в русском языке для upload и download, поэтому использовались англоязычные версии =)
Меня, как человека привыкшего, что инпут типа файл не позволяет с собой практически ничего делать это сначала ввело в сильное удивление. Однако, коллега подсказал, что на инпут типа файл таки можно повесить события или джаваскриптовый клик. Так что всё оказалось очень даже просто.
Намеренно я не буду писать так, как сделано у меня, только продемонстрирую решение. В проекте юзается jQuery, поэтому обращение с объектами ещё проще.
1. Формируем ссылочку, по нажатию на которую будем вызывать системный диалог выбора файла. Действие по умолчанию - войдовая функция, которая ничего не делает =) А вот на onClick вешаем функцию, которая выполняет клик по полю инпут типа файл. Писать код в свойстве ссылки - некрасиво, но мне лень городить функцию, поэтому пусть будет так.
<a href="javascript:void(0);" onClick="$('#PASSPORT_PHOTO').click();">Загрузить</a> страницу паспорта c фотографией.
2. Так как мы скроем поле инпут типа файл, то пользователь не поймёт что он выбрал файл. Поэтому нам надо как-то просигнализировать, что файлик был выбран, например, показывать хотя бы его имя. Будем его выводить вот в это поле (я не дизайнер, не надо меня бить тапками)
<b id="b_PASSPORT_PHOTO" style="color:green"></b>
3. Создаём инпут типа файл, который и будет обрабатывать наши действия. Однако, скрываем его, так как нам по дизайну не положено =) На событие onChange вешаем сигнализацию =)
<input type="file" name="PASSPORT_PHOTO" id="PASSPORT_PHOTO" style="display:none" onChange="$('#b_PASSPORT_PHOTO').append(' Файл: '+this.value)">
Самое главное, что ничего лишнего не надо обрабатывать. Данные приходят как от обычного инпута типа файл, ведь обработчик-то как раз оттуда...
ЗЫ не смогла найти адекватных аналогов в русском языке для upload и download, поэтому использовались англоязычные версии =)
Комментариев нет:
Отправить комментарий