Стилване на input type=file

След дълго затишие дойде време да напиша нова статия. Надявам се да помогне на някой при стилването на input type file, защото всички знаем, че този тип полета не могат да се стилнат просто със css. Налага се да се използват някои трикчета.

Наложи ми се да напиша код, с който добавяме нови файлове, като имаме 2 бутончета, за качване на файл и за почистване на полето. Затова, освен самото стилване ще покажа и как се зачиства input type=“file“.

Ето го и работещото примерче.

Като за начало това е html -a

<div id="example">
  Това е текст, след който ще се появи полето
  <a class="btnAdd" title="Upload file" href="javascript:;">Качи файл</a>
</div>

А ето го и javascripta

$('.btnAdd').click(function() {
// пишем нужният ни html
var input_field = '&lt;div class="filebrowse" id="input'+'1"&gt;&lt;div class="fileinputs"&gt;&lt;input type="file" class="file" size="10" name="uploadFile" &gt;&lt;div class="fakefile"&gt;&lt;input type="text" name="file"/&gt;&lt;/div&gt;&lt;/div&gt;&lt;a href="javascript:;" title="" class="delete_file" &gt;&lt;/a&gt;&lt;/div&gt;';
// добавяме преди бутона
$(this).prev().after(input_field);
// премахваме бутона за качване на 1 файл, и добавяме бутон, с който да качваме още файлове
$(this).replaceWith('&lt;a href="javascript:;" title="Upload more files" class="more_files"&gt;Качи още файлове&lt;/a&gt;');
});
 
// когато стойността на file input се промени трябва да променим стойността на
// input полето, което стои над него.
 
$(".file").live('change', function ( e ) {
$(this).next().children('input').val(this.value);
});
 
//ако искаме да изтрием файла по някаква причина, това е невъзможно да се случи както при другите типове input полета
// затова трябва да презапишем html-а на input.
// първата идея която ми хрумна беше
// var current = $(this).prev().html(); all browsers
// $(this).prev().html(current);
// но се оказа, че това не се получава за IE, затова реших да направя следното
 
$('.delete_file').live('click', function ( e ) {
var newvalue = "&lt;input class='file hidden' type='file' name='uploadFile' size='10' /&gt;&lt;div class='fakefile'&gt;&lt;input type='text' size='10' /&gt;&lt;/div&gt;";
$(this).prev().html(newvalue);
 
});
 
/*
За добавяне на следващи полета за файлове
*/
$('.more_files').live('click', function ( e ) {
// проверяваме колко полета имаме добавени за момента
var num = $(this).parents('#example').find('.filebrowse').length;
 
if( num!=0 ){
// всяко поле ще си има уникален номер
var newNum = num + 1;
// създаваме html за полето (заедно с всички нужни за стилването елементи)
var input_field = '&lt;div class="filebrowse" id="input'+ newNum +'"&gt;&lt;div class="fileinputs"&gt;&lt;input type="file" class="file" size="10" name="uploadFile" &gt;&lt;div class="fakefile"&gt;&lt;input type="text" name="file"/&gt;&lt;/div&gt;&lt;/div&gt;&lt;a href="javascript:;" title="" class="delete_file" &gt;&lt;/a&gt;&lt;/div&gt;';
 
// добавяме полето след последното добавено вече
$('#input' + num).after(input_field);
}
});

Разбира се трябва да се обърне внимание и на css-а, който прави нещата да изглеждат добре.

Цялата идея е, че крием file полето и над него слагаме друго поле, в което изписваме кой е избрания файл.

Имаме клас filebrowse, който държи полето, заедно с другия input.

На мен ми трябват 2 иконки, 1 за качване на файловете и 1 за изтриване на файл. Тях ги слагам с абсолютно позициониране, като едната (за качване) е като background на fakefile – елемента, който държи 2-рия input, а другата е линк.

самото file input поле се крие с помощта на opacity:0, което разбира се за различните браузъри е написано по различен начин.

 

div.filebrowse {
position: relative;
width: 125px;
height: 24px;
overflow: hidden;
border: 1px solid #BEBEBE;
margin: 0 0 10px 0px;
}

div.fakefile {
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
background: url(../images/icons.png) 80px 0px no-repeat;
width: 98px;
height: 24px;
border: none;
}
.fakefile input {
width: 80px;
height: 20px;
line-height: 24px;
border: none;
color: #666;
font-size: 12px;

}
input.file {
position: relative;
text-align: right;
opacity:0;
filter: alpha(opacity=0);
-moz-opacity: 0;
-khtml-opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
z-index: 2;
margin-left: -15px;
*margin-left: -22px;
border: none;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
input.file {
margin-left: 65px;
}
}

.more_files,
.btnAdd {
background: #eb7405;
padding: 5px 30px;
color: #fff;
text-transform: uppercase;
clear: left;
font-style: italic;
}
.btnAdd {
background: #03519d;
clear: both;
}
.delete_file {
background: url(../images/icons.png) 0 -26px no-repeat;
display: block;
width: 20px;
height: 20px;
position: absolute;
top: 2px;
right: 5px;
z-index: 5;
}

В общи линии това е. Ако имате въпроси или предложения как да се направи по-лесно и елегантно – насреща съм 🙂

Оставете коментар

Design To HTML от Стайл нет