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