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

42

Від автора: вітаю вас, друзі. У попередній статті ми з вами створили елемент форми input з типом file, з допомогою якого можна завантажити файл на сервер. Однак за замовчуванням зовнішній вигляд даного елемента форми залишає бажати кращого. Хотілося б стилізувати його. Як це зробити? Про це у статті Оформлення input file нижче. Почнемо?

Вихідні файли поточної статті ви можете завантажити за посиланням.

Отже, візьмемо код з попереднього уроку. Як ви пам’ятаєте, наша форма виглядає так:

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

В Хромі поле завантаження файлу також не блищить красою. До того ж ми отримали різне оформлення в різних браузерах. Як же красиво оформити полі input file і при цьому отримати більш або менш однакове оформлення незалежно від браузера?

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

Тепер спробуємо ініціалізувати плагін. Зробити це досить просто, пропишемо в нашому коді 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 і отримали цілком симпатичне поле для завантаження файлів. Ну а на цьому наша стаття завершена. Удачі!