Все рано или поздно получают от дизайнеров макет, где нужно реализовать поля ввода имени файлов в стиле страницы. То есть в дизайн разрабатываемого проекта изначальный внешний вид елемента не вписывается: он по-разному выглядит в разных браузерах, кнопочка Upload выглядит совсем сухо.
Из стандартного елемента управления нужно получить примерно следующее:
Если с обычными кнопками все более менее просто, то здесь обычной подстановкой картинки и добавлением событий не обойтись.
Искала готовые решения, нашла http://www.quirksmode.org/dom/inputfile.html
Чем хорош этот пример, работать он будет в любом браузере железно. Учтены даже InternetExplorer4.
Но в моем случае такая предостороджность излишняя, поэтому я решила несколько упростить этот пример и где возможно использовать prototype.js
Итак, HTML код остался прежним:
<div class="fileinputs">
<input type="file" id="your-file" class="file" size="47" />
</div>
Javascript облегчился:
function styleFileUnputs() {
var fakeFileUpload = new Element('div', {'class' : 'fakefile'});
var fakeInputText = new Element('input', {'type': 'text', 'class' : 'text fake', 'value': 'Upload File'})
fakeFileUpload.insert(fakeInputText)
fakeFileUpload.insert(
new Element('a', {'hreg' : '#', 'class' : 'button'}).update(
new Element('span', {'class': 'middle'}).insert('Upload').insert(new Element('span', {'class': 'right'}))
)
)
var x = $$('.fileinputs input.file');
for (var i = 0; i < x.length; i++) {
var clone = fakeFileUpload.cloneNode(true);
x[i].parentNode.appendChild(clone);
x[i].relatedElement = clone.getElementsByTagName('input')[0];
x[i].onchange = function () {
this.relatedElement.value = this.value;
this.relatedElement.removeClassName('fake');
}
}
}
и СSS я немного подточила под себя:
.fileinputs {
position: relative;
height: 22px;
}
div.fakefile {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
z-index: 1;
}
input.file {
position: absolute;
right: 0;
width:100%;
-moz-opacity:0 ;
filter:alpha(opacity: 0);
opacity: 0;
z-index: 2;
}
.fileinputs .button {
float: none;
position: absolute;
top: 0; right: 0;
}
.fakefile .text { width: 295px; color: #000;}
.fakefile .text.fake { color: #aaa; }
Не все мне понравилось.
