Артём Мáлков

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

26 апр5 комм

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

Кроссбраузерная стилизация 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>

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

Рекомендуем к просмотру
10-балльная оценка в отзыве о товаре в OpenCart
Хаки
Как получить имена всех выбранных файлов в input[multiple] на jQuery?
Модули и скрипты
Объединяем несколько значений input/textarea в одном поле на jQuery
Модули и скрипты
5
комментариев
Форма комментирования этого поста скрыта. Авторизуйтесь, чтобы расширить привилегии гостевого посещения и получить необходимую помощь от сообщества Pandoge.
    • 2
    766
      •  Гости
    18 ноя в 19:26

    Артем здравствуйте!

    Большое спасибо за материал, очень выручили!

    Пара моментов. Для множественного выбора добавьте к input атрибут multiple.

    Не умничаю, просто начал у себя тестить и множественный не работал, потом понял. :)

    Ещё одна мелочь, если кто-либо захочет при множественном выборе, чтобы не имена через запятую выводились а "Выбрано столько-то файлов" чуть добавил в скрипт:

    $(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);

    }

    var f_name_count = f_name.length;

    if(f_name_count == 1) {

    $("#f_name").val(f_name);

    } else {

    $("#f_name").val('Выбрано ' + f_name_count + ' Файла(ов)');

    }

    });

    });

    • 1
    766
      •  Гости
    10 ноя в 15:29

    А, все, отлепил через редактирование страницы

    • 1
    766
      •  Гости
    10 ноя в 15:27

    Какая-то фигня прилипла к курсору. Зачем?

    • 7
    1066
      •  Команда Pandoge
    11 сен в 13:45

    Здравствуйте! Кроссбраузерно не получиться, разве что дописывать еще часть скриптов для внедрения разметки.

    А так, если возникают трудности с модулем - можем помочь внедрить в него нужную разметку.

    • 2
    766
      •  Гости
    11 сен в 10:47

    Доброго дня! А если стандартная кнопка загрузки файлов выводится через специально установленный плагин. Есть ли возможность изменить кнопку через css без редактирования html ?

Подняться наверх
«Pandoge» - помощник вебмастера