В FF нет метода click() для INPUT type=»file»

Если вы захотите стилизовать кнопку вызова с обзором файла на локальной машине, т.е. стилизовать элемент управления <INPUT type=»file»>, то у Вас это получится не во всех браузерах. А точнее – это не получится в Лисе (проверено на версии 1.5.0.6).

Я прогугилил варианты решения и ничего толкового не нашел. Хотя ощущается оригинальность решений. Выделить можно два.

О первом варианте вы можете получить представление на странице http://www.quirksmode.org/dom/inputfile.html Я бы назвал это решение: «Если очень нужно, то можно уже и как-нибудь». Принцип сводится к тому, что используется полная прозрачность тега INPUT который накладывается поверх дизайнерского решения. Если вы попробуете решение, а потом попробуете что-то изменить ручками в строке с адресом, то вы увидите, как все запущенно. Другими словами решать задачу на уровне представления нереально по одной причине – у каждого браузера свое представление тега <INPUT type=»file»> – говоря простым языком размеры поля ввода и кнопки могут быть разными большими/маленькими/узкими/толстыми и т.д. все зависит от операционной системы и ее настроек. В общем, если Ваш заказчик сайта топотит ногами, ничего не хочет слушать и с пеной у рта требует стилизовать стандартную кнопку – то используйте вариант, предложенный по ссылке. А когда будете показывать клиенту работу, то меняйте значение в поле только кликами мышки по кнопке «Обзор».

Второй вариант пришел сразу же мне на ум, как только я услышал о проблеме. Думаю, что вы тоже о нем сразу подумали:

<INPUT TYPE=»file» id=»filo» style=»display:none»>
<INPUT TYPE=»button» value=»Любой объект HTML, поддерживающий событие onclick()» onclick=»javascript: document.getElementById(‘filo’).click()»>

Да, решение простое, как долото. НО, это решение не работает в Лисе. Опять моя «любимая» Лиса! Я пошел на форум Мозиллы и задал вопрос. И получил ответы, из которых можно сделать выводы:

1. Я не там искал. Я искал ответ в спецификации языка HTML, а нужно было искать в спецификации DOM, потому что эмуляция события onclick() происходит с помощью метода объекта. Так вот в спецификации по моему вопросу указано следующее:
   

   click
   Simulate a mouse-click. For INPUT elements whose type attribute has one of the following values: «button», «checkbox», «radio», «reset», or «submit».

   Т.е. о «file» ничего не сказано. Так же ничего не сказано об типе «image», но в Лисе тег с этим типом имеет метод click().

2. Судя по ответам я подумал, что ситуация по моему вопросу в ближайшее время не изменится. Потому что озвученное мной решение по какой-то непонятной причине считается небезопасным. В чем опасность я так и не понял, а мне никто не объяснил. (Может, кто-то знает и молчит? Признавайтесь!!!). На форуме Мозиллы мой топик перенесли в раздел «Разработка» (что это значит – я не знаю, на форуме толком смысл этого раздела не описан – остается только догадываться).

Озвучу мысли:

1. Нужно разделять объектную модель (элементы со свойствами и методами) и представление документа средставми языка разметки.
2. Получается так, что остальные производители броузеров плохо разбираются в безопасности и дали доступ в своих броузерах к огромнейшей дыре, через которую можно напакостить клиенту. А то что дизайн с таким элементом управления может оказаться убогим, так это мелочь.

Я к своему неприятному удивлению обнаружил, что у меня нет локальной копии спецификации по DOM. Я нашел и скачал ее, теперь буду обязательно пользоваться. Вообщем, поживем – увидим. Надеюсь, что здравый смысл победит паранойю и всем будет счастье.

Ссылки по теме:

1. Document Object Model (DOM) Level 2 HTML Specification (Архив ZIP для скачивания)
2. Document Object Model (DOM) Level 2 HTML Specification (on-line спецификация)