Доброго времени суток, дорогой читатель! Сегодня я расскажу вам как сделать из обычного поля формы загрузки файлов сделать более привлекательное. В этом нам поможет Bootstrap File Input. Для начала Вам нужно подключить Twitter Bootstrap на Ваш сайт, как рассказано в статье «Bootstrap FrameWork» и сам модуль File Input (ссылка для скачивания)

Подключение

Как обычно, подключаем javascript в конце html файла (после bootstrap.js)

<script src="path_to_file/bootstrap.file-input.js"></script>

Использование

Создадим небольшую форму для закачки файлов

<form action="" method="post" enctype="multipart/form-data" role="form">
<div class="form-group">
<label for="name">Имя</label>
<input type="text" class="form-control" name="name" id="name" placeholder="Ваше имя" required />
</div>
<div class="form-group col-sm-6" style="padding-right: 10px;">
<label for="file"></label>
<input type="file" name="file" id="file" class="form-control" data-filename-placement="inside" title="Выбрать файл" />
</div>
<div class="form-group col-sm-6" style="padding-left: 10px;">
<button type="submit" class="btn" name="submit">Отправить</button>
</div>
</form>

Теперь нам надо подключить модул к определенному полю, в нашем случае к полю с id = file. Вставляем код ниже в конец страницы:

<script>$( document ).ready(function() { $('#file').bootstrapFileInput(); }</script>

Если у вас одно поле с загрузкой файлов на странице, то к полю можно обратиться $('input[type=file]').bootstrapFileInput();

Атрибуты

В этом модуле можно использовать следующие атрибуты поля input
АтрибутЗначение атрибута
title Название кнопки String
data-bfi-disabled Если этот атрибут установлен, то отключается форматирование поля, т.е. оно будет отображаться в браузере по умолчанию без значения
data-filename-placement Расположение значения title:
  • outside устанавливается справа от кнопки
  • intside устанавливается внутри кнопки
String Default: 'outside'

На этом ознакомление с Bootstrap File Input завершено, пользуетесь и развивайтесь! Пример этого помощника можно увидеть на одностраничном сайте (landing page), созданного мною для компании Scream Technologies в разделе "Контакты".

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