input type=file

[Cypher76]

Известная проблема: подогнать под дизайн сайта поле загрузки файов: добавить бордюр, сделать внутренние отступы, сменить кнопку и т.д. Вот и я поимел первый опыт борьбы с ней. Хочу попросить покритиковать мое решение.

Сразу скажу, что основано оно на идее перекрытия настоящего файл-инпута кнопкой и текстовым полем. Мне почти подошло решение предложенное здесь, за что автору большое спасибо, но пришлось немного допилить под себя.

Моя задача: кнопка BROWSE выводится справа от текстового поля. Занимаюет ширину "по ширине текста в ней". Все оставшееся место уходит на текстовое поле имени файла.

Подход к решению: делаем два div`а: в первый помещаем input type=text. Во второй input type=button и "под нее" загоняем input type=file. Загоняем при помощи абсолютного позиционирования и прозрачности. На div`ы вешаем разметку.

Далее надо как-то связать настоящий, скрытый file-input и новое текстовое поле, ведь когда пользователь выбирает файл, то путь к этому файлу остается в скрытом поле. Автор изначальной статьи предлагает скрипт:

onchange="javascript: document.getElementById('fileName').value = this.value"

Вешаем его на настоящий, скрытый, файл инпут. Он находит наше текстовое поле и отдает ему имя файла из настоящего файл-инпута. К сожалению, только имя, а не полный путь, но этого, думаю, достаточно.

Далее автор изначальной статьи предлагает к новому текстовому полю привязать аргумент:

readonly="readonly"

и оставить так. Можно, но по мойму это как-то сбивает с толку. При клике по текстовой области нетемезированного файл-инпута должно открывать окно обзора файлов, как при клике по кнопке. Предлагаю на этот случай скрипт:

onclick="javascript: document.getElementById('realInput').click()

привязываем его к ненастоящему, текстовому полю.

Вроде все работает, но я не уверен. По этому и прошу покритиковать и может быть натолкнуть на путь "лечения" минусов:

Результат: тут.

Минусы:

1) После выбора файла видно только его название, а не весь путь.

2) Есть проблема с заданием ширины настоящего, скрытого файл-инпута. Хотелось бы задать ему ширину в 100%, чтобы он растянулся на весь родительский блок-кнопку. Но тогда получаем такую картину под кнопкой:

Соответственно над текстовой областью настоящего инпута у нас тектовый курсор. И никакими cursor-свойствами CSS это не лечится. По этому убираем ширину в 100% и ставим какой-нить громадный шрифт. Получаем следующую картину:

Мы видим только верхнюю часть кнопки над которой годный курсор arrow, но из-за такого выпендрежа ширина кнопки, как видно fire-bug`ом занимает черти сколько места. Боюсь, как бы это нигде не всплыло потом.

3) Я практически не знаком с JS, и не знаю, как обобщить используемые JS-вставки на случай с несколькими инпут-файлами на странице. Хотелосьбы отказаться от айдищников и поиска элементов по айдишнику в пользу this и селекторов типа: .c-file-input-button input[type=text] и .c-file-input-button input[type=file]. Если есть идеи, подскажите, пожалуйста!

Скачь код странички

Код:

<style>
	.container {
		width: 500px;
		margin: 0 auto;
		padding: 20px;
		background: #eeeeee;
	}	
		.c-file-input-button {
			float: right;
			margin: 0 0 0 1em;
			position: relative;
			overflow: hidden;

		}
			.c-file-input-button input[type="button"] {
				background-color: #33BB00;
				color: #FFFFFF;
				border-style: solid;
			}

			.c-file-input-button input[type="file"] {
				height: 100%;
			/*	width: 100%;	*/
				font-size: 200px;
				cursor: pointer;

				position: absolute;
				right: 0;
				top: 0;

				opacity: 0;
				filter: alpha(opacity=0);
				-ms-filter: "alpha(opacity=0)";
				-khtml-opacity: 0;
				-moz-opacity: 0;
			}

		.c-file-input-text {
			overflow: hidden;
		}
			.c-file-input-text input[type="text"] {
				-moz-box-sizing: border-box;
				-webkit-box-sizing: border-box;
				box-sizing: border-box;

				width: 100%;
				border: 1px solid #e2e2e2;
				padding: 2px;
			}

</style>

<div class="container">

	<div class="c-file-input">

		<div class="c-file-input-button">
			<input type="button" value="Any width uppload button">
			<input type="file" id="realInput" class="file_input_hidden" onchange="javascript: document.getElementById('fileName').value = this.value" />
		</div>

		<div class="c-file-input-text">
			<input type="text" id="fileName" readonly="readonly" onclick="javascript: document.getElementById('realInput').click()">
		</div>

	</div>

</div>

Edited November 24, 2011 by Cypher76

[Cypher76]

Путем мыслительного эксперемента обнаружил уже серьезный косяк: из-за read-only пользователь не может изменить свое решение о загружаемости файла. Если файл выбран, то все, не стереть содержимое поля. А если убрать read-only, то мы открываем мнимое поля ввода, в который пользователь может попытаться прописать путь. Сформулирую в виде вопроса:

Вопрос: как можно синхронизировать введенные значения в двух полях:

<input type="file"> и <input type="text">

, чтобы при изменениях в одном они отображались в другом + в обратную сторону?

Подскажите, пожалуйста, где копать?

[Great Rash]

Никак. В файл-инпуте не пищется настоящий путь, поэтому путь до файла получить не получится, а уж тем более прописать.