Gorinich2.0 :: Post

Декоративная кнопка Обзор. Делаем невозможное.	9 июля 2007 11:41
Tags: file, form, input, Верстка, кнопка обзор, финт

Никогда бы не подумал, что буду что-то про верстку. Но жизнь штука странная. Да и люди бывают не очень продвинутые в web-технологиях и просят сделать вроде бы простые, но на первый взгляд невозможные вещи. Думаю, все знают стандартный элемент формы для загрузки файлов. Вот он А вот теперь попробуйте сделать его красивым. "Легко, ведь есть CSS!!!" - скажут многие, и многие будут правы. Но попробуйте сделать так Слабо? Вот и мне сначала было слабо. Ведь заменить этот элемент нечем, этого требует безопасность. Вы же ведь не хотите, чтобы страничка умела сама по себе загрузить Ваш файл? Не найдя у себя в голове и в документации решения этой проблемы я решил спросить у Яндекса. Говорят там найдется все. И правда, нашлось. Ответ был короток: "Никак. Или так." Ничего больше Яндекс не нашел. Я изучил эту статью, но сделать как там у меня не получилось, видимо и не особо хотелось. Особо насторожил большой скрипт, который, при ближайшем рассмотрении, как оказалось, делает одну простую и не понятно зачем нужную вещь. Он просто ищет все элементы типа file и оформляет их как положено. Но зачем нам такая радость, если у нас на странице целых 3 таких элемента? Правильно - не надо нам такого. Еще очень не понравился пример работы этой радости (самый последний по той ссылке). Сами попробуйте и поймете. Вот я и решил воспользоваться не самим способом, а только его идеей. За что огромное спасибо Michael McGrady. И у меня получилось. Причем от скрипта не осталось и следа. А идея по сути проста. Мы размещаем в три слоя следующие элементы. Внизу картинка, над ней поле file, и в самом верху обычное текстовое поле. Зачем нужно текстовое поле, вы скоро поймете. Идея думаю понятна. Теперь задача состоит в другом, сделать чтобы это все заработало и смотрелось как надо. Чтобы заработало, нам надо с помощью тега div разместить над картинкой в нужных местах поле file и текстовое поле. Для этого будем использовать свойство z-index слоя. Поле file нужно разместить так, чтобы кнопка располагалась в том месте, где ее замена нарисована на картинке. Выглядеть будет примерно так Вот исходник этого примера div.fileinputs { position: relative; left:0; } div.fakebtn { position: absolute; top: 0px; left: 10px; z-index: 1; } input.file { position: absolute; top: 0px; left: 20px; z-index: 3; } <div class="fileinputs"> <input type="file" class="file" /> <div class="fakebtn"> <img src="http://gorinich.net/direct/imgs/issues/browse_button.gif" alt="" /> </div> </div> Выглядит ужасно и не так как надо, но это всего лишь заготовка. Теперь нам надо сделать элемент file прозрачным. Не невидимым, а именно прозрачным. Для этого браузер должен поддерживать opacity. Это свойство работает в Explorer 5.5+ и в Mozilla. Так что придется ради красоты пожертвовать несовместимостью с некоторыми браузерами. Итак, делаем. Перепишем стиль input.file. Заодно и переименуем его ;) input.fakefile { position: relative; -moz-opacity:0 ; filter:alpha(opacity: 0); opacity: 0; z-index: 3; } <div class="fileinputs"> <input type="file" class="fakefile" /> <div class="fakebtn"> <img src="http://gorinich.net/direct/imgs/issues/browse_button.gif" alt="" /> </div> </div> Попробуйте нашу новую кнопку в действии. Работает! Вот только имя файла не видно :). Поле-то прозрачное. Для этого нам и понадобится упомянутое ранее текстовое поле. Сделаем это. Объявим полю новый стиль div.faketext { position: absolute; top: 0px; left: 20px; z-index: 5; } <div class="fileinputs"> <input type="file" class="fakefile" /> <div class="faketext"> <input name="filename1" type='text' /> </div> <div class="fakebtn"> <img src="http://gorinich.net/direct/imgs/issues/browse_button.gif" alt="" /> </div> </div> Теперь нам надо сделать так, чтобы и это все смотрелось красиво. Объявим еще один стиль, для этого поля, сделаем ему прозрачный фон, уберем границы и придадим нужные размеры. Еще нам не надо, чтобы пользователь мог ввести в поле что-либо. Ведь от этого никакого толку, а пользователь только растеряется, если введет имя файла руками и ничего не получит. Еще нам надо сделать, чтобы в это поле выводилось имя выбранного файла. Для этого напишем всего одну строчку скрипта. Делаем input.browsetext { background: transparent; height: 17px; width: 120px; font-family: Verdana; font-size: 9px; border: none; color: #000000; } <form name="uploadfiles"> <div class="fileinputs"> <input type="file" class="fakefile" onchange='document.forms["uploadfiles"]. elements["filename"].value=this.value' /> <div class="faketext"> <input name="filename" type="text" class="browsetext" readonly /> </div> <div class="fakebtn"> <img src="http://gorinich.net/direct/imgs/issues/browse_button.gif" alt="" /> </div> </div> </form> Вот и все. Теперь вы можете пользоваться новым элементом как обычным, только теперь нельзя будет ввести имя файла вручную, но так ли часто вы это делаете... Удачной разработки.
В закладки: