Кроссбраузерная замена input file

Для загрузки файлов, как правильно используют стандартный тег input, с типом file. Его отображение настраивается каждым браузером по своему. Как правило проблемы возникают, когда нужно убрать надпись "Файл не выбран" или назначить этому input свой дизайн.

Ниже описано решение, которое не принуждает к использованию javascript и absolute. На выходе вы получите лёгкое редактирование дизайна кнопки, без текста о выбранном или не выбранном файле. Решение является полностью кроссбраузерным!


<style type="text/css">
	.input_button_style 
		{ margin-left:10px; text-align:center; overflow:hidden; width:130px; height:20px; border:1px solid #3D3D3D; background-color:#2B2B2B; border-radius:4px; }
	.input_font_style 
		{ color:#fff; font-size:16px; font-weight:bold; }
	.input_input_style 
		{ margin-top:-50px; margin-left:-410px; -moz-opacity:0; filter:alpha(opacity=0); opacity:0; font-size:150px; height:100px; }
</style>

<div class="input_button_style">
	<div class="input_font_style">Выбрать файл</div>
	<input type="file" name="select_file" id="file" size="1" class="input_input_style">
</div>

Источник решения на хабре

Для того, чтобы рядом с кнопкой отображалось название выбранного файла, придётся добавить немного javascript:


<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$('#file').change(function() {
			$('#file').each(function() {
				var name = this.value;
  				reWin = /.*\\(.*)/;
				var fileTitle = name.replace(reWin, "$1");
				reUnix = /.*\/(.*)/;
				fileTitle = fileTitle.replace(reUnix, "$1");
				$('#namefile').html(fileTitle);
			});
		});
	});
</script>

<style type="text/css">
	.input_button_style 
		{ margin-left:10px; text-align:center; overflow:hidden; width:130px; height:20px; border:1px solid #3D3D3D; background-color:#2B2B2B; border-radius:4px; }
	.input_font_style 
		{ color:#fff; font-size:16px; font-weight:bold; }
	.input_input_style 
		{ margin-top:-50px; margin-left:-410px; -moz-opacity:0; filter:alpha(opacity=0); opacity:0; font-size:150px; height:100px; }
</style>

<div id="namefile"></div>
<div class="input_button_style">
	<div class="input_font_style">Выбрать файл</div>
	<input type="file" name="select_file" id="file" size="1" class="input_input_style">
</div>

Пример работы смотрите по ссылке

Комментарии и отзывы к материалу

04.03.2015

Евгений пишет:
Спасибо, мне помогло!!!

04.03.2016

Александр пишет:
Спасибо

Отправить комментарий

Как зовут?

Сообщение