Оформление input file

Оформление input file

От автора: приветствую вас, друзья. В предыдущей статье мы с вами создали элемент формы input с типом file, с помощью которого можно загрузить файл на сервер. Однако по умолчанию внешний вид данного элемента формы оставляет желать лучшего. Хотелось бы стилизовать его. Как это сделать? Об этом в статье Оформление input file ниже. Начнем?

Исходные файлы текущей статьи вы можете скачать по ссылке.

Итак, возьмем код из предыдущего урока. Как вы помните, наша форма выглядит так:

Это вид input file в браузере Firefox. Давайте взглянем на форму в браузере Chrome:

В Хроме поле загрузки файла также не блещет красотой. К тому же мы получили разное оформление в различных браузерах. Как же красиво оформить поле input file и при этом получить более или менее одинаковое оформление вне зависимости от браузера?

Мы с вами используем Bootstrap, поэтому для решения задачи специальным плагином — Bootstrap File Input. Подобные плагины можно найти и для вариантов без Bootstrap. Скачаем и подключим плагин. Нам необходимо подключить файл стилей (подключаем после bootstrap.min.css) и файл js (подключаем перед bootstrap.min.js) плагина:

<link href="bootstrap-fileinput/css/fileinput.min.css" rel="stylesheet" />
<script src="bootstrap-fileinput/js/fileinput.min.js"></script>

Теперь попробуем инициализировать плагин. Сделать это достаточно просто, пропишем в нашем коде JS базовый вариант:

$(function(){
	$("#file").fileinput();
});

Здесь мы обращаемся к полю id=»file» и вызываем метод плагина fileinput() без настроек. Посмотрим на результат:

Смотрится отлично! При этом аналогичный результат мы получим в различных браузерах. Для настройки поля file остается лишь заглянуть в документацию. Например, я хочу, чтобы вместо поля с кнопкой, присутствовала только кнопка. Для этого используем такой вариант:

$(function(){
	$("#file").fileinput({
		showCaption: false
	});
});

Отлично! Можем попробовать изменить стандартный текст Browse на что-то другое. Заодно изменим класс кнопки:

$(function(){
	$("#file").fileinput({
		showCaption: false,
		browseLabel: 'Выберите файл...',
		browseClass: 'btn btn-success'
	});
}); 

Все очень просто и гибко. Как видим, мы стилизовали input file и получили вполне симпатичное поле для загрузки файлов. Ну а на этом наша статья завершена. Удачи!

Фреймворк Bootstrap - верстаем адаптивно, просто, быстро!

Получите видеокурс по основам Bootstrap

Получить

Метки:

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

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

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

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

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

Я не робот.

Spam Protection by WP-SpamFree