Тег <input> является одним из разносторонних элементов формы и позволяет создавать разные элементы интерфейса и обеспечить взаимодействие с пользователем. Главным образом <input> предназначен для создания текстовых полей, различных кнопок, переключателей и флажков.
Основной атрибут тега <input>, определяющий вид элемента — type. Он позволяет задавать следующие элементы формы: текстовое поле (text), поле с паролем (password), переключатель (radio), флажок (checkbox), скрытое поле (hidden), кнопка (button), кнопка для отправки формы (submit), кнопка для очистки формы (reset), поле для отправки файла (file) и кнопка с изображением (image). «type=file» определяет поле для ввода имени файла, который пересылается на сервер.
У браузеров нет единых стандартов, как отображать этот элемент по умолчанию.
Так он выглядит в 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;
}Теперь поле формы выглядит так (При этом можно менять его размер, цвет, шрифт и выравнивание):
