На сайте ведутся работы!
Поэтому могут быть ошибки и недочеты. Приносим свои извинения и постараемся все исправить в ближайшее время.
AdBlock
Блокируйте рекламу. Просматривайте быстрее.
Adguard
Самый быстрый и легковесный блокировщик рекламы для браузеров.
Недавние обсуждения
Просматривая различные сайты с jQuery-плагинами, наткнулся на вполне простой, но нужный, который позволяет создать свой стиль для input type file. Сам стиль вполне годный, но вы легко можете поменять цвета на свои в CSS.

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

Ну, а теперь после короткого вступления, перейдем непосредственно к установке скрипта для input.

Установка

Стиль и скрипт будет распространяться на поля input с значением type="file"

Код
<input type="file" name="file1" >


Вставьте в таблицу стилей (CSS):

Код
.fileUpload {  
background: #fff;  
border: 0;  
display: block;  
margin: 2% 0 5% 0;  
width: 100%;  
/* border radius */  
-o-border-radius: 6px;  
-moz-border-radius: 6px;  
-webkit-border-radius: 6px;  
border-radius: 6px;  
}  

.fileUpload .fileBtn {  
background: #2C88D6;  
cursor: pointer;  
float: left;  
font-size: 1em;  
font-weight: bold;  
padding: 3% 0;  
text-align: center;  
width: 33%;  
/* border radius */  
-o-border-radius: 6px 0 0 6px;  
-moz-border-radius: 6px 0 0 6px;  
-webkit-border-radius: 6px 0 0 6px;  
border-radius: 6px 0 0 6px;  
}  
.fileUpload .fileBtn:hover {  
background: #2C4356;  
}  

.fileUpload .fileName {  
float: right;  
overflow: hidden;  
white-space: nowrap;  
width: 67%;  
text-align: center;  
color: #000;  
padding: 3% 0;  
}  

.fileUpload .fileBtn:hover {  
-webkit-transition-property: background;  
-webkit-transition-duration: 0.4s;  
-webkit-transition-timing-function: ease-in;  
-moz-transition-property: background;  
-moz-transition-duration: 0.4s;  
-moz-transition-timing-function: ease-in;  
-o-transition-property: background;  
-o-transition-duration: 0.4s;  
-o-transition-timing-function: ease-in;  
-ms-transition-property: background;  
-ms-transition-duration: 0.4s;  
-ms-transition-timing-function: ease-in;  
transition-property: background;  
transition-duration: 0.4s;  
transition-timing-function: ease-in;  
}  

.fileUpload:after {  
clear: both;  
content: " ";  
display: block;  
height: 0;  
line-height: 0;  
visibility: hidden;  
}


Подключим jQuery и скрипт. В uCoz jQuery уже предустановлен, поэтому первую строку можно удалить:

Код
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>  
<script src="js/fileinput.js"></script>


Затем запускаем плагины:

Код
<script>  
$(document).ready(function() {  
fileInput();  
});  
</script>


На этом все, в JavaScript-файле есть следующие параметры

Название класса блока, в котором находятся кнопка и название файла:

Код
fi_container_class = fi_container_class || 'fileUpload';


Название класса для кнопки:

Код
fi_button_class = fi_button_class || 'fileBtn';


Название класса для элемента содержащего текст:

Код
fi_filename_class = fi_filename_class || 'fileName';


Текст внутри кнопки:

Код
fi_button_text = fi_button_text || 'Обзор...';
Теги к материалу
свой, стиль, Input, file, Type, для
Поделись материалом с друзьями
Рекомендуем к просмотру
К материалу оставили 0 комментариев