Как создать нестандартный input с типом file с помощью jQuery, CSS3 и PHP

Нестандартный input типа file

От автора: Всем известно, что если нужно внести изменения в соответствии с требованиями заказчика, то поля выбора файла очень ограничены, и тогда как существует множество сложных плагинов с дюжинами альтернативных вариантов, позволяющих вам подогнать их, иногда трудно заставить эти поля работать. Этот учебник проведет вас по процессу создания плагина jQuery с поддержкой множества файлов и простой альтернативой для старых браузеров, гм…, IE9-8, заменяющего стандартный уродливый input.

демо

Подготовка проекта

Сначала давайте создадим папку customFile и 3 файла: jquery.customFile.js, jquery.customFile.css и customFile.html. Возьмите этот шаблон HTML и скопируйте/вставьте его в свой проект.

Теперь, когда у нас есть все, что нужно, давайте откроем свой файл HTML и добавим контейнер и input с типом file с его меткой label:

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Также убедитесь, что задали ему id и название массива, такое как myfiles[] с тем, чтобы сервер мог отыскать все имена файлов с альтернативой для IE, о чем мы поговорим позже.

Далее откройте jquery.customFile.js и установите основной плагин-заготовку jQuery:

Наконец, вызовите в своей разметке плагин:

Как это работает

Для построения модифицированной пользовательской замены нам понадобится простая структура разметки:

Щелчок по кнопке «open» запустит событие щелчка «click» в исходном файловом input-е. После выбора файла исходный input запускает событие «change», где мы установим значение inputa путем получения доступа к файловому массиву, если файловый API поддерживается, или иначе получив доступ к исходному значению.

Создание плагина

Сначала нужно протестировать браузер на поддержку multiple. Проще всего – создать input и проверить, имеется ли у него в наличии свойство multiple, иначе браузер не станет поддерживать множество файлов. Нам также нужно проверить, не является ли браузер IE, чтобы позже кое-что в нем поправить. Этот код можно вынести наружу плагина, так как он не зависит от самого элемента.

Теперь давайте создадим элементы, необходимые для замены. У IE имеются серьезные меры безопасности, предотвращающие извлечение имени файла, если input запускается извне, поэтому мы применим вместо кнопки button метку label. Запустив событие по метке, можно проработать этот вопрос.

Атрибут type=»button» нужен для устойчивости, для предотвращения отправки формы некоторыми браузерами. Далее давайте отделаемся от исходного input-а. Вместо того, чтобы скрыть его, давайте удалим из поля зрения, сдвинув влево, таким образом, мы все же сможем использовать его даже когда он невидим; это подходит для запуска событий, что может оказаться проблематичным, если input просто скрыт.

Наконец давайте прикрепим к DOM свои новые элементы:

На этом этапе у вас должно уже получиться нечто, выглядящее примерно так в нормальном браузере; об IE мы позаботимся позже.

Прикрепление событий

Самое первое, что следует сделать – предотвратить попадание в фокус исходной формы, а также свежесозданной кнопки. Оказаться в фокусе сможет только текстовый input.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Давайте запустим на кнопке событие щелчка click для открытия диалога. В IE, поскольку там нет настоящей кнопки, метка должна уже запустить диалог без дополнительного труда.

Событие focus в некоторых браузерах нужно запускать, так что событие щелчка сработает должным образом. Если на этом этапе попытаться щелкнуть в браузере «open», то должен открыться файловый диалог. Теперь можно применить событие change, запускаемое после выбора файла для заполнения значения текстового input-a выбранным файлом (файлами).

Улучшение юзабилити

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

Запускайте событие blur в исходном input-e, когда замена теряет фокус.

Открывайте диалог при нажатии пользователем «enter» в текстовом input-e кроме IE (из-за ограничений безопасности это не сработает).

Удаляйте файлы с помощью «backspace» или «delete», или же пользователю придется открыть диалог и нажать для очистки ввода «cancel».

Другими словами:

Альтернативы для старых браузеров

Самая легкая альтернатива получения возможности ввода большого количества файлов – создание множественных input-ов. Когда файл выбран, мы создаем новый input и, когда input очищен, удаляем его.

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

Модифицирование внешнего вида

На этом этапе все уже должно работать, поэтому давайте «приправим блюдо» стилями:

Продолжайте работу и модифицируйте CSS для создания собственного внешнего вида.

Поиск файлов на сервере

Первым делом оберните свой input в форму и добавьте кнопку отправки submit:

Затем мы можем получить все имена файлов и напечатать их в test.php:

Так как мы применяем имя массива myfiles[], сервер отыщет все файлы, даже если используется альтернативный вариант. Узнать больше можно в руководстве PHP о загрузке множества файлов (Uploading Multiple Files).

Заключение

Файловые inpu-ы можно сравнительно легко и без особых усилий приспосабливать под требования заказчика. Альтернативный вариант, естественно, не идеальный выход, но он работает и его легко поддерживать без сотен строк кода или других техник типа Flash, Silverlight и т.д…

Плагин тестировался на IE9-8 и всех современных браузерах. Возьмите полный код или поиграйте с демоверсией. Если есть предложения, пожалуйста, оставьте ниже комментарий.

Автор: Cedric Ruiz

Источник: http://www.onextrapixel.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

JavaScript&jQuery с нуля до профи

Пройдите пошаговый видеокурс по JavaScript&jQuery

Научиться

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree