От автора: приветствую вас, друзья. В предыдущей статье мы с вами создали элемент формы input с типом file, с помощью которого можно загрузить файл на сервер. Однако по умолчанию внешний вид данного элемента формы оставляет желать лучшего. Хотелось бы стилизовать его. Как это сделать? Об этом в статье Оформление input file ниже. Начнем?
Исходные файлы текущей статьи вы можете скачать по ссылке.
Итак, возьмем код из предыдущего урока. Как вы помните, наша форма выглядит так:
Это вид input file в браузере Firefox. Давайте взглянем на форму в браузере Chrome:
В Хроме поле загрузки файла также не блещет красотой. К тому же мы получили разное оформление в различных браузерах. Как же красиво оформить поле input file и при этом получить более или менее одинаковое оформление вне зависимости от браузера?
Мы с вами используем Bootstrap, поэтому для решения задачи специальным плагином — Bootstrap File Input. Подобные плагины можно найти и для вариантов без Bootstrap. Скачаем и подключим плагин. Нам необходимо подключить файл стилей (подключаем после bootstrap.min.css) и файл js (подключаем перед bootstrap.min.js) плагина:
1 2 |
<link href="bootstrap-fileinput/css/fileinput.min.css" rel="stylesheet" /> <script src="bootstrap-fileinput/js/fileinput.min.js"></script> |
Теперь попробуем инициализировать плагин. Сделать это достаточно просто, пропишем в нашем коде JS базовый вариант:
1 2 3 |
$(function(){ $("#file").fileinput(); }); |
Здесь мы обращаемся к полю id=»file» и вызываем метод плагина fileinput() без настроек. Посмотрим на результат:
Смотрится отлично! При этом аналогичный результат мы получим в различных браузерах. Для настройки поля file остается лишь заглянуть в документацию. Например, я хочу, чтобы вместо поля с кнопкой, присутствовала только кнопка. Для этого используем такой вариант:
1 2 3 4 5 |
$(function(){ $("#file").fileinput({ showCaption: false }); }); |
Отлично! Можем попробовать изменить стандартный текст Browse на что-то другое. Заодно изменим класс кнопки:
1 2 3 4 5 6 7 |
$(function(){ $("#file").fileinput({ showCaption: false, browseLabel: 'Выберите файл...', browseClass: 'btn btn-success' }); }); |
Все очень просто и гибко. Как видим, мы стилизовали input file и получили вполне симпатичное поле для загрузки файлов. Ну а на этом наша статья завершена. Удачи!