Записки самоучки

Сентябрь 2, 2006

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

Filed under: Броузеры,Глюки,Ссылки,HTML,JavaScript — 4matic @ 12:18 пп

Если вы захотите стилизовать кнопку вызова с обзором файла на локальной машине, т.е. стилизовать элемент управления <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 спецификация)

11 комментариев »

  1. гы, все теги вырезали🙂

    Вобщем click() на не работает, а на работает, но на файрфоксе у простого батона приоритет выше чем у …

    комментарий от Solaris — Октябрь 12, 2006 @ 11:23 дп

  2. Какая умная система каментов, вырезает ВСЕ, что между знаками «меньше» и «больше». Респект.

    комментарий от Solaris — Октябрь 12, 2006 @ 11:25 дп

  3. Solaris, поздравляю с первым знакомством с вордпрессом🙂 в общем, заменяй угловые скобки на сущности и выкладывай, а то не понятно что ты там на что поменял, что click() заработал.

    комментарий от dark-demon — Май 5, 2007 @ 6:28 пп

  4. У меня тоже проблема с этими кликами.
    Есть такое решение — делать прозрачным поле с кнопкой и выводить её на верх.

    комментарий от shady — Июнь 15, 2007 @ 9:00 дп

  5. вышеприведеннный код не работает😦
    т.е. клик срабаытывает
    появляется окно выбора файла
    он выбирается и заносится его значение TextBox
    но, когда происходит submit страницы на сервер, fileupload содержит в себе нулевые значения.
    подскажите. пожалуйста, как разрешить эту проблему.

    комментарий от Vad — Август 28, 2007 @ 8:37 пп

  6. Все попытки записать что-то в значение поля для выбора файла для передачи на сервер с помощью JS обречены на неудачу. Чем раньше вы это поймете, тем лучше.
    Иначе, представьте, что кто-то с помощью такого средства закачает ваши файлы с паролями и т.п.

    комментарий от Петров — Сентябрь 26, 2007 @ 11:34 пп

  7. Здрасти!
    Мне надо сделать так что-б в в інпуте отображался путь к уже загруженому на сервер файлу. Я сделал input type=»file» как display: none;. Вместо него отображаеться другой текстовый инпут с кнопочкой. на клик моей кнопки привязан document.getElementById(’file_input_id’).click().
    Все вроде хорошо.. Но есть одна проблема. При клике на сабмит все поля input type=»file» очищаються. Причем по одному полю за клик. После того как все инпути очищены идет сабмит форми но с пустыми полями!
    Не пойму в чем проблема..

    ЗЫ: Мои фейковие инпути в поза формой которая сабмититься. Тестил в ИЕ 6.0.
    Помогите плз. оч надо

    комментарий от kodlan — Апрель 9, 2008 @ 8:26 пп

  8. —озвученное мной решение по какой-то непонятной причине считается небезопасным

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

    комментарий от sc — Апрель 24, 2008 @ 5:43 дп

  9. Речь немного не о том :
    Нужно сделать не отправку произвольного файла на сервер, а программно вызвать диалог выбора файла. Так что в этом случае никаких нарушений безопасности не будет.
    А то что скрытно файл не отправить, так это правильно, и не будет работать и в ИЕ.
    Другое дело, что иногда хотелось бы установить путь и имя файла для диалога, но по большому счету не так страшно.
    А на будущее, перед тем как писать комменты нелишне бы разобраться в сути проблемы.

    комментарий от guest — Июль 9, 2008 @ 12:19 пп

  10. Если нужно оформить файлинпут — то это проще простого, единственное от чего придется отказаться — это pointer при наведении:
    Вобщем верстаешь какой либо объект — как должен выглядеть инпут, его контейнеру задаёшь четкие размеры и overflow:hidden, дальше просто абсолютишь инпут со значением right:0 в контейнере (не забыть дать контейнеру relative), присваиваешь ему font-size: 100em; и скрываешь через opacity. Всё — визуально пользак кликает на твою кнопку и разворачивается окно виндовс.

    комментарий от Miller — Март 21, 2011 @ 1:12 пп


RSS feed for comments on this post. TrackBack URI

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

Заполните поля или щелкните по значку, чтобы оставить свой комментарий:

Логотип WordPress.com

Для комментария используется ваша учётная запись WordPress.com. Выход / Изменить )

Фотография Twitter

Для комментария используется ваша учётная запись Twitter. Выход / Изменить )

Фотография Facebook

Для комментария используется ваша учётная запись Facebook. Выход / Изменить )

Google+ photo

Для комментария используется ваша учётная запись Google+. Выход / Изменить )

Connecting to %s

Создайте бесплатный сайт или блог на WordPress.com.

%d такие блоггеры, как: