Генератор CSS-свойства «border-radius»
Артем Мáлков
336 просм
0 комм
Поделиться

Кроссбраузерная стилизация input[type="file"] на CSS+jQuery

Я думаю, что многих, как и меня, не совсем устраивает стандартный вид поля загрузки файлов. Помимо того, что оно, грубо говоря, некрасивое, так еще и в разных браузерах выглядит по-разному.

Кроссбраузерная стилизация input[type="file"] на CSS+jQuery

Наша же задача – сделать поле более привлекательным и, разумеется, привести его к единству.

Для решения задачи нам поможет тег label, который связывает текст и прочие элементы с элементами формы (в нашем случае – с кнопкой), jQuery (который поможет нам получить необходимую информацию о выбранных файлах – имена и их расширение) и дополнительное поле input, где мы будем непосредственно хранить нашу информацию о файлах.

1. Первое, что вам потребуется – это само поле с выбором файла. Код его следующий:

<div class="upload_form">
<label>
<input name="file" type="file" class="main_input_file">
<div>Обзор...</div>
<input class="f_name" type="text" id="f_name" value="Файл не выбран." disabled>
</label>
</div>

И выглядит все это пока так:

Кроссбраузерная стилизация input[type="file"] на CSS+jQuery

Как вы заметили в коде, дополнительное текстовое поле мы заблокировали, чтобы в дальнейшем пользователь не мог на него воздействовать, ведь в нем у нас будет выводиться информация о файле.

2. Теперь мы напишем небольшой скрипт, который как раз и будет выводить нам информацию о файле:

<script>
$(document).ready( function() {
$(".main_input_file").change(function(){
var f_name = [];
for (var i = 0; i < $(this).get(0).files.length; ++i) {
f_name.push(' ' + $(this).get(0).files[i].name);
}
$("#f_name").val(f_name.join(', '));
});
});
</script>

Код желательно вставить перед закрывающим тегом </body>. И смотрим, что у нас получилось:

Кроссбраузерная стилизация input[type="file"] на CSS+jQuery

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

3. Для этого напишем небольшой CSS-стиль:

.main_input_file {
display: none;
}
.upload_form div {
width: 100px;
height: 32px;
background: #3498db;
border-radius: 4px;
color: #fff;
text-align: center;
line-height: 32px;
font-family: arial;
font-size:14px;
display: inline-block;
vertical-align: top;
}
.upload_form div:hover {
background: #2980b9;
cursor: pointer;
}
#f_name {
background: transparent;
border: 0;
display: inline-block;
vertical-align: top;
height: 30px;
padding: 0 8px;
width: 150px;
}

Все это сохраняем и любуемся результатом:

Кроссбраузерная стилизация input[type="file"] на CSS+jQuery

По-моему, очень неплохо.

Возможные ошибки в работе этого метода

Из так называемых проблем, по которым этот способ может у вас не сработать, – это отсутствие библиотеки jQuery (очень частая проблема статичных сайтов). Решается следующим способом.

Перед закрывающим тегом </head> подключите библиотеку:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

Хочу подчеркнуть, что, в отличие от подобных инструкций на других сайтах, моя – более простая и к тому же может работать с множеством фалов в вашем поле (в таком случае все выбранные файлы в поле будут указываться через запятую).

0
комментарий
Оставить комментарий:
Нажимая кнопку «Отправить» вы даете согласие на обработку своих персональных данных.
Ваше Имя
Ваш E-mail
Текст комментария