Форма в popup. Стилизация input type file.

sent_form_popup

В данном примере будет вызываться popup окно по клику на элемент, которое содержит форму с возможностью прикрепить файл(аттач). Кнопки имеют свой уникальный стиль, при нажатии на аттач для пользователя должно быть понятно что файл подцеплен и видна часть имени, без изменения размеров кнопок.

Основная сложность была в кроссбраузерном решении стилизации кнопки input type=file.

Для красивого отображения выбранного файла сделано пару манипуляций на js. Из пути к файлу на диске убирается сначала все кроме названия файла, потом если название длинное отсекается часть названия заменяя пропущенную часть на ..

$("input:file[id=file-upload]").change(function() {
				str = $(this).val();
				name = str.replace(/^.*(\\|\/|\:)/, '');
				if(name.length > 10)
				{
					ext = name.split(".").pop().toLowerCase();
					name = name.substr(0,9).toLowerCase() + '...' + ext;
				}
				$("#file-upload-value").html( name );
			})

Рабочий пример можно посмотреть: Demo

Просмотров: 2 415

Добавить комментарий

Ваш e-mail не будет опубликован.

Можно использовать HTML теги:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Перед отправкой формы:
Human test by Not Captcha