Наверх

Произвольный вид поля file в html-форме, одинаковый во всех браузерах

Тег <input> является одним из разносторонних элементов формы и позволяет создавать разные элементы интерфейса и обеспечить взаимодействие с пользователем. Главным образом <input> предназначен для создания текстовых полей, различных кнопок, переключателей и флажков.

Основной атрибут тега <input>, определяющий вид элемента — type. Он позволяет задавать следующие элементы формы: текстовое поле (text), поле с паролем (password), переключатель (radio), флажок (checkbox), скрытое поле (hidden), кнопка (button), кнопка для отправки формы (submit), кнопка для очистки формы (reset), поле для отправки файла (file) и кнопка с изображением (image). "type=file" определяет поле для ввода имени файла, который пересылается на сервер.

У браузеров нет единых стандартов, как отображать этот элемент по умолчанию.

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

Так он выглядит в Internet Explorer 9:

А так - в Firefox:

В Google Chrome:

В Opera:

В Safari:

Как же привести их к одному дизайну, чтоб во всех браузерах форма выглядела одинаково. Так, как этого желает дизайнер? Для этого нам на помощь прийдет html+css.

В то место, где должно быть поле выбора файла, вставим следующий код:

<div class="fileform">
<div class="selectbutton">Обзор</div>
<input id="upload" type="file" name="upload" />
</div>

а в файл стилей добавим такие блоки:

.fileform { 
background-color: #FFFFFF;
border: 1px solid #CCCCCC;
border-radius: 2px;
cursor: pointer;
height: 26px;
overflow: hidden;
padding: 2px;
position: relative;
text-align: left;
vertical-align: middle;
width: 230px;
}
 
.fileform .selectbutton { 
background-color: #A2A3A3;
border: 1px solid #939494;
border-radius: 2px;
color: #FFFFFF;
float: right;
font-size: 16px;
height: 20px;
line-height: 20px;
overflow: hidden;
padding: 2px 6px;
text-align: center;
vertical-align: middle;
width: 50px;
}
 
.fileform #upload{
position:absolute; 
top:0; 
left:0; 
width:100%; 
-moz-opacity: 0; 
filter: alpha(opacity=0); 
opacity: 0; 
font-size: 150px; 
height: 30px; 
z-index:20;
}

Теперь во всех браузерах поле формы выглядит одинаково:

Главный недостаток полученного решения от стандартной формы - оно никак визуально не сигнализирует о том, что файл был выбран. Эта проблема решается с использованием javascript.

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

<div class="fileform">
<div id="fileformlabel"></div>
<div class="selectbutton">Обзор</div>
<input type="file" name="upload" id="upload" onchange="getName(this.value);" />
</div>
.fileform #fileformlabel { 
background-color: #FFFFFF;
float: left;
height: 22px;
line-height: 22px;
overflow: hidden;
padding: 2px;
text-align: left;
vertical-align: middle;
width:160px;
}

Сама функция-обработчик получает полное имя выбранного файла, отбрасывает путь (с проверкой стандарта в файловой системе), сохраняет имя с расширением в переменную filename и записывает его в блок fileformlabel.

function getName (str){
if (str.lastIndexOf('\\')){
var i = str.lastIndexOf('\\')+1;
}
else{
var i = str.lastIndexOf('/')+1;
}						
var filename = str.slice(i);			
var uploaded = document.getElementById("fileformlabel");
uploaded.innerHTML = filename;
}

Теперь поле формы выглядит так (При этом можно менять его размер, цвет, шрифт и выравнивание):

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *