Главная
Web-дизайн
Стилизация поля добавления файлов — input file

Стилизация поля добавления файлов — input file

Стилизация поля добавления файлов - input file

Доброго времени суток. 🙂

В этой статье рассмотрим способ, который поможет решить проблему - как изменить поле добавления файла для формы отправки. Данная статья поможет тем, кто просто хочет придать форме более свежий вид или вы занимаетесь разработкой посадочных страниц(Landing Page) и вас не устраивает обычный вид формы. Ведь на лендингах чаще используется яркий, необычный привлекающий внимание дизайн, а стандартное поле добавления файла, как то не вписывается в данную концепцию.

Все преобразование мы совершим с помощью стилей CSS и jQuery. Когда вы изучите материал, то увидите, что можно обойтись только CSS, но тогда не будет видно какой файл выбран. как раз для динамики и будет использоваться jQuery. Когда все будет закончится, результат будет примерно следующим:



Пример

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

Для начала нужна разметка HTML. У меня будет свой код, у вашей формы свой. Главное, вы должны заменить свое поле выбора файла на мое или подогнать свое под основные параметры моего. Обычное поле добавления файла выглядит примерно так:

<input type="file" name="file">

У нас же будет иметь следующий вид:

<div class="fl_upld">
<label><input id="fl_inp" type="file" name="file">Выберите файл</label>
<div id="fl_nm">Файл не выбран</div>
</div>

Давайте немножко разберем, что и как.

  • <div class="fl_upld"> - заключаем все в блок контейнер. Условие обязательное. Присваиваем блоку класс fl_upld.
  • <label><input id="fl_inp" type="file" name="file">Выберите файл</label> - наше поле прикрепления файла заключаем в label. Это наш и идентификатор поля. Самому полю присваиваем id="fl_inp". Тоже важный момент. Ну и добавляем текст - Выберите файл. Этот текст будет на будущей кнопке.
  • <div id="fl_nm">Файл не выбран</div> - блок, который изначально выводит текст - Файл не выбран. После выбора файла вместо этого текста появится название файла. данному блоку присваиваем id="fl_nm". Забегу наперед, скажу, что если не будете подключать скрипт для вывода имени файла, то можете не добавлять данный блок. У вас будет просто кнопка без динамики.

Далее добавляем несложные стили нашей кнопке. Просто добавьте следующий код в свой файл стилей:

.fl_upld{width:300px;}
#fl_inp{display:none;}
.fl_upld label{
cursor:pointer;
background:#36c;
border-radius:3px;
padding:10px 25px;
color:#fff;
font-weight:bold;
text-align: center;
}
.fl_upld label:hover{background:#fc0;}
#fl_nm{
margin-top:20px;
color:#f00;

Быстро расскажу, что за что отвечает.

  • Для контейнера fl_upld устанавливаем ширину в 300px. Если это поле будет внутри вашей формы, у которой будет ширина, то в принципе можно эту строчку не писать и ширину не задавать.
  • #fl_inp{display:none;} - скрываем наше стандартное поле прикрепления файла. Это важный и единственный главный параметр.
  • Далее для .fl_upld label - пишем параметры. Идентификатор и станет нашей кнопкой. Прописываете все что хотите, чтобы сделать кнопку нужного вида.
  • .fl_upld label:hover{background:#fc0;} - стили для кнопки. кола на нее наводишь курсор. У нас она просто становится желтой.
  • Ну и напоследок для #fl_nm блока названия файла тоже добавляем параметры.

Вот и все стили, конечно же как и всегда можете менять их как угодно и подгонять под себя. Главный параметр - это скрыть стандартное поле. #fl_inp{display:none;}

Теперь приступим к последнему шагу, добавлению скрипта вывода имени файла при добавлении. Так как скрипт работает на jQuery, сначала нужно подключить библиотеку. если это уже сделано делать этого не нужно.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
[/php
<p>Далее уже сам скрипт.</p>

<script>
$(document).ready( function() {
    $("#fl_inp").change(function(){
         var filename = $(this).val().replace(/.*\\/, "");
         $("#fl_nm").html(filename);
    });
});
</script>

Если вы не знаете как правильно добавлять скрипт и библиотеку, то прочитайте статью - Как и где подключить скрипт?

Разберем немного сам скрипт.

  • $("#fl_inp") - во второй строке указываем айди нашего скрытого поля.
  • $("#fl_nm").html(filename); - в четвертой строке указываем айди последнего блока в котором будет выводится имя файла вместо текста - Файл не выбран. Мы делаем замену значения.

То есть нужно просто правильно указать два ID. Если Вы будете менять айди и классы на свои, то не запутайтесь и укажите везде правильно, чтобы все корректно работало. Сделав все правильно, результат не заставит себя ждать. Если вдуматься и понять все, то становится ясно, что сложного тут ничего нет.

На этом все, спасибо за внимание. 🙂




Если Вам был полезным мой труд, можете поддержать сайт :)


Оцените статью
  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
Проголосовало: 6, в среднем: 5 из 5

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

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

Уважаемые пользователи! При добавлении комментариев на сайт Вам следует соблюдать правила указанные под формой отправки комментариев.

Соблюдайте добавления комментариев

Это не спам *

Нажмите, чтобы добавить код в комментарий
X

Привет дорогой друг

У тебя установлено расширение AdBlock или подобное. Добавь мой сайт в белый список, и тем самым внесешь свой вклад в его развитие. Инструкция как отключить AdBlock Хочу такое же окошко