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

Все преобразование мы совершим с помощью стилей 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>
[php]
<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. Если Вы будете менять айди и классы на свои, то не запутайтесь и укажите везде правильно, чтобы все корректно работало. Сделав все правильно, результат не заставит себя ждать. Если вдуматься и понять все, то становится ясно, что сложного тут ничего нет.

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