Владимир Илиев портфолио

Код лаборатория

Как да сменим стандартната визия на input file поле

Може би доста разработчици си задават въпроса - "Как да сменим стандартната визия на input file поле?". Според някои това е невъзможно, с което разбира се не съм съгласен и ще се опитам да докажа тезата си в тази статия.

Проблемът

Създали се чудесен на външен вид сайт, който обаче нарушава визията си заради различното под всички браузъри "Browse" поле за входящи данни. Да речем, че останалите текстови полета от Вашата форма изглеждат по този начин:

Как обаче да накараме "Browse" полето да изглежда така при положение, че под разпространените браузъри визуализирането му е различно за всеки един от тях:

Съществува начин за манипулация на въпросното поле с помощта на CSS и минимално количество JavaScript, което го прави доста лесен за употреба метод.

Решението

Първото нещо, което ще направим е да създадем нужния XHTML код, който изглежда по този начин:

<form>
   <div class="text"><input id="path" type="text" readonly="readonly" /></div>
   <div class="file"><input type="file" onChange="document.getElementById('path').value=this.value;" /></div>
</form>

Специфичното тук е, че създаваме фалшиво текството поле, което ще съдържа пътя на директорията на избрания файл, който път ще се копира с помощта на JavaScript при OnChange на input file полето. Това текстово поле не играе никаква роля при изпращането на данните след submit, а участва единствено от визуална гледна точка.

Под произволен графичен редактор създаваме и картинките за поле и "Browse" бутон, които ще използваме. Кръщаваме ги с имена bg_input.gif и bg_browse.gif, като в текущия случай това са:

Сега е време да опишем правилата за визуализация в CSS файла, който ще изглежда така:

form div {
   float: left;
}
form .text {
   height: 30px;
   width: 200px;
   background-image: url(bg_input.gif);
   background-repeat: no-repeat;
   background-position: left top;
   margin-right: 5px;
}
form .text input {
   float: left;
   height: 19px;
   width: 184px;
   margin-top: 6px;
   margin-left: 8px;
   background-color: transparent;
   border-style: none;
   font-family: "Trebuchet MS", Verdana, Tahoma, Arial, sans-serif;
   font-size: 12px;
   color: #333333;
}
form .file {
   height: 30px;
   width: 80px;
   overflow: hidden;
   position: relative;
   background-image: url(bg_browse.gif);
   background-repeat: no-repeat;
   background-position: left top;
}
form .file input {
   position: absolute;
   right: 0px;
   font-size: 16px;
   cursor: pointer;
   opacity: 0;
   filter: alpha(opacity: 0);
}

В общи линии важното, което трябва да се спомене тук е, че с помощта на свойствата filter и opacity скриваме цялото input file поле, като под него поставяме в div елемент, като background, картинката на бутона "Browse", като в нашия случай това е "Избери". DIV елементът трябва да бъде с относителна позиция, а самото input file поле с абсолютна позиция. След това със свойството font-size увеличаваме големината на "Browse" бутона до толкова, че да покрие площта на нашия бутон "Избери", с което го правим годен за употреба и активация. Останалата част от кода, мисля че не е сложна за разбиране.

Описаният метод работи успешно с Mozilla Firefox 2.0.0.6, Internet Explorer 6 и 7, Opera 9.10, Safari 3.0.2 и най-вероятно под още доста други, но специално под тези гарантирам, защото лично съм ги изпробвал. При проблеми и неясноти с формата ми пишете от тук.

Крайният резултат

Воаля! Манипулираното с CSS и Javascript input file поле:

Изтегли пълният код