Хаки и Скрипты Next Generation CMS : Кнопки и иконки, CSS, html, JS : Хочу красивую кнопку загрузки файлов

irbees2008 Опубликовано - 1 - сентября Кнопки и иконки

Уровень сложности исполнения: это делается простым копированием и нажиманием кнопки

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

И так приступим.
У нас есть поле

Код:

<input type="file" name="file" />

Которое и является нашей кнопкой загрузки .
Далее добавляем label, это нам понадобится для оформления.
Вот так должно получится

Код:

<input type="file" name="file" />
<label for="file">Выберите файл</label>

Теперь займемся стилями
1.Скрываем поле file:

Код:

.inputfile {
	width: 0.1px;
	height: 0.1px;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	z-index: -1;
}

И так у нас на странице остался только label, Вот его и будем оформлять.
2.Добавляем стилей для label

Код:

.inputfile + label {
	font-size: 1.25em;
	font-weight: 700;
	color: white;
	background-color: black;
	display: inline-block;
        cursor: pointer;
}
.inputfile:focus + label,
.inputfile + label:hover {
	background-color: red;
}

По умолчанию элемент label не кликабельный, и мы добавили параметр cursor со значением pointer.

Элемент label не выделяется клавиатурой tab, сделаем так, чтобы его можно было выделять посредством клавиатуры, таким же образом, как это можно сделать для стандартных полей ввода.

Код:

.inputfile:focus + label {
	outline: 1px dotted #000;
	outline: -webkit-focus-ring-color auto 5px;
}

Теперь что касается описания кнопки выбора файла. Сделаем так, чтобы при выборе одного файла кнопка отображала его имя, при выборе нескольких – показывалось общее количество файлов. Реакцию на выбор пользователя мы запрограммируем на javascript, а так же воспользуемся библиотекой JQuery.

Подготовим скрытое поле, для работы с ним:

Код:

<input type="file" name="file" id="file" class="inputfile" data-multiple-caption="{count} files selected" multiple />

Код Javascript:

Код:

var inputs = document.querySelectorAll( '.inputfile' );
Array.prototype.forEach.call( inputs, function( input )
{
	var label	 = input.nextElementSibling,
		labelVal = label.innerHTML;

	input.addEventListener( 'change', function( e )
	{
		var fileName = '';
		if( this.files && this.files.length > 1 )
			fileName = ( this.getAttribute( 'data-multiple-caption' ) || '' ).replace( '{count}', this.files.length );
		else
			fileName = e.target.value.split( '\\' ).pop();

		if( fileName )
			label.querySelector( 'span' ).innerHTML = fileName;
		else
			label.innerHTML = labelVal;
	});
});

Что делать, если javasvript отключен в браузере?
Редко, но случается, что в браузере может быть выключен код javascript, что делать в этом случае? Ничего не остается, кроме того, чтобы вернуть видимость скрытому полю выбора файла.

Код:

<html class="no-js">
    <head>
        <script>(function(e,t,n){var r=e.querySelectorAll("html")[0];r.className=r.className.replace(/(^|\s)no-js(\s|$)/,"$1js$2")})(document,window,0);</script>
    </head>
</html>

Дополнительный код в CSS:

Код:

.js .inputfile {
	width: 0.1px;
	height: 0.1px;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	z-index: -1;
}

.no-js .inputfile + label {
	display: none;
}

Можешь почитать и вот эту статейку "JS - Внешние объекты "

Это тоже интересно

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.