BaBL Apr 4 2008 at 19:31

Кастомайзим INPUT FILE.

3 min

Website development*

+16

Comments 53

3al Apr 4 2008 at 19:39

Неплохо бы добавить noscript.

BaBL Apr 4 2008 at 19:42

noscript нету в списке тегов хабры, да и скрипты все в

BaBL Apr 4 2008 at 19:47

* в <code>

AndryX Apr 4 2008 at 20:02

Дайте ссылку на страницу с демонстрацией :)

BaBL Apr 4 2008 at 20:44

добавил

elfiki Apr 4 2008 at 20:02

http://habrahabr.ru/blog/la_france/24341.html

BaBL Apr 4 2008 at 20:09

ага, про него и говорил. Сейчас добавлю.

elfiki Apr 4 2008 at 20:10

Кстати, в сафари кнопка выбора находится совсем в другой стороне...

BaBL Apr 4 2008 at 20:24

Это не имеет значения, сейчас попробовал в Сафари, он срабатывает по клику по любой части этого input элемента (как и FF3), а выравнивание все равно остается поправо. Так что "сэмулированная" кнопка все равно получается активной.

Bahusss Apr 4 2008 at 21:22

В FF2 вручную вбить имя файла у меня не получилось.

BaBL Apr 4 2008 at 21:27

собственно это не является "стандартной" возможностью (а возможно даже вредной, вогнать бы туда скриптом файл пассвордов какой-нить и сабмитнуть на онлоде прямо) подобного инпута. Некоторые браузеры (Сафари и ФФ3, к примеру) вообще при клике на поле ввода запускают сразу выбор файла.

Bahusss Apr 4 2008 at 22:20

Уговорили =) в закладки.

Tails Apr 4 2008 at 23:39

Вы уверены, что такое возможно? :)

BaBL Apr 4 2008 at 23:53

нет, как раз сейчас этим занимается спецификация file, запрещающая почти все манипуляции с инм через JS. Но, вообще, речь тут немного о другом шла.

ELV1S Apr 4 2008 at 23:28

Этот приём давно описал Peter-Paul Koch. Styling an input type="file" (кстати, первая ссылка в гугле по запросу css input type file).

Сам пользовался им.

BaBL Apr 4 2008 at 23:52

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

ELV1S Apr 5 2008 at 00:14

Да ну? Там тоже самое что и у ваc.

BaBL Apr 5 2008 at 00:23

Ну, если так, то буду только рад, если решение уже кому-то пришло в голову. Я на оригинальность не претендую, идея довольно простая.

Zav Apr 5 2008 at 06:17

swf-upload юзаем, и костумайзем все как хотим :)
Фул фьючед демо
На нем, впринципе, можно сделать любые формы + красивый статус закачки :)
Единственное, он флеш юзает.

WarGoth Apr 5 2008 at 11:49

>Единственное, он флеш юзает
А потому не пригоден для закрытых частей сайта. Есть решения и этой проблемы, но они не достаточно элегантны и оставляет хорошую дырку в безопасности ваших сессий. По-моему с этими аплоад-боксами вообще ничего не надо делать. Лишние навороты.

А в других случаях swf-upload - отличное решение.

UFO just landed and posted this here

WarGoth Apr 5 2008 at 14:33

Управление загрузками полностью отдается flash-плееру. Он постом отправляет файлы из очереди. Дело в том, что он не передает в заголовках кукисы, а значит и сессию. Решение заключается в том, чтобы передавать строку сессии методом GET. Например, когда я прикручивал этот загрузчик в CakePHP, то там приходилось отключать проверку User Agent'a чтобы сессия оставалась валидной (а у плеера строка user agent'a совсем иная, чем у используемого браузера).
Все это вкупе открывает дырку в безопасности для похитителей сессий.

UFO just landed and posted this here

WarGoth Apr 5 2008 at 15:14

Пытался решить эту проблему на flasher.ru
Тщетно

zencd Apr 5 2008 at 08:55

А вот я в Gmail встречал такую фичу: при клике на обычную ссылку, ссылка заменялась на INPUT FILE и диалог выбора файла выскакивал сам. Но долго эта фича почему-то не прожила.

Как, интересно, такое делается…

BaBL Apr 5 2008 at 09:31

да просто вешается на ссылку обсервер (ну или напрямую onclick), который заменяет outer.div.innerHTML (или span) на форму ввода файла. Можно и через DOM добавить новые элементы, но он существенно медленней.

zencd Apr 5 2008 at 09:36

Dайнамик HTML — это просто
но как вызвать тот диалог?

BaBL Apr 5 2008 at 10:02

К сожалению не помню уже что там было у гмейла, через вебфейс в него почти не захожу. Боюсь без более подробной информации не смогу ответить.

qbique Apr 5 2008 at 17:09

делается через функцию click() для file input element. поддерживает её исключительно ИЕ
работает очень просто document.getElementById('fileInput').click()

gentleman Apr 7 2008 at 15:14

Мне кажется, что на гугле не стали бы делать "исключительно для ИЕ"...

qbique Apr 7 2008 at 15:16

Стали. Достаточно сравнить как добавляются аттачменты в ИЕ и в других браузерах (там просто появляется поле для выбора файла, те приходить кликать дважды, чтобы открыть диалог для выбора файла через эксплорер)

volk13 Apr 5 2008 at 09:36

В FF 3,05b под мак само поле ввода не активно. И никак не хочет активизироваться=) Кнопка работает как надо.

BaBL Apr 5 2008 at 10:00

имеется ввиду с этим вариантом или вообще? В этом варианте во всех браузерах поле ввода не активно, а кнопка работает. Под Linux в FF3b5 "стандартное" поле ввода кликается как и кнопка, но с этим фейковым оно начинает работать как и у других.

Zeraman Apr 5 2008 at 11:20

А в чем смысл то?

ganzer Apr 5 2008 at 11:28

Тут 2 варианта. Либо выебнуться либо у дизайнера жопа начинается от плечей.

-3

BaBL Apr 5 2008 at 11:38

второй вариант.

b3atb0x Apr 5 2008 at 12:07

почему-то кажется бредом. Наверное пока не столкнусь с острой необходимостью - не пойму смысле этих действий

BaBL Apr 5 2008 at 12:47

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

ELV1S Apr 5 2008 at 15:01

Это очень плохо. И для верстальщика и для пользователя. Верстальщику лишний геморрой, пользователю непривычные контролы.

Есть исключения, не спорю, но они довольно редки.

BaBL Apr 5 2008 at 16:20

Я с тобой согласен, если речь идет о хабрахабре или еще каком-нибудь общественном портале, но если речь про "лицо компании", то там эти проблемы никого уже не волнуют.

Аналогия из "материальной жизни", сосед взял Nokia 8800, сделал 1 звонок - батарея почти сдохла. Он поперся в сервис и получил там ответ: "Ты с него звонить собрался? Этот телефон не для звонков, он для того, чтоб ты пришел, достал его из кармана и показал что оно у тебя есть. А если звонить хочешь - бери себе вдобавок 1100 и заряжай раз в неделю". Тут ситуация та же. Имидж стоит дорого и за такие сайты тоже платят много.

tsabu Apr 5 2008 at 14:08

кнопка browse на один пиксель ниже чем поле ввода

BaBL Apr 5 2008 at 14:23

это из-за top:1px в классе pseudbutton. Просто когда готовил пост, CSS взял из текущего проекта, а в нем кнопки на 2 пикселя уже, чем поля ввода, поэтому они со смещением от верха идут. Так что багов отображения тут нету.

qbique Apr 5 2008 at 17:30

знакомая техника :)
есть мелкая, но решаемая проблема. Разная ширина кнопки Browse в разных браузерах и, как следствие, можно попасть вместо кнопки в само поле. я решал это путём запихивания инпута в див, который по размерам идентичен кнопке. overflow:hidden прятал само поле ввода. а если размер шрифта сделать болшьшим (скажем > 18px), то кнопка browse занимает всю площадь ограничивающего блока.
вот как выглядит примерно

если интересно, есть ссылка на рабочий пример )

qbique Apr 5 2008 at 17:39

странно, но тег IMG не обработался.. вот прямой линк на картинку с пояснениями http://www.fileqube.com/hl/OtiRhLG3200/custom_input.gif

BaBL Apr 5 2008 at 18:00

такую идею тоже прорабатывал, от нее остался overflow:hidden; на рилфайле, но, столкнулся с проблемой выравнивания по правому полю кнопки, чтобы левая часть уходила "в div". В мозилле и опере работало, а ИЕ упорно задвигал саму кнопку вправо. Если есть кроссбраузерный CSS, напечатайте пожалуйста.

qbique Apr 5 2008 at 18:17

не совсем суть понял :) стиль использовался вот такой
------------
.inputWrapper { position:absolute; right:0px; cursor:pointer; display:block; width:80px; height:22px; overflow:hidden; opacity:0; filter:alpha(opacity:0); text-align:right;}
.fileInput {cursor:pointer; display:block; font-size:20px; float:right; right:0px; position:absolute;}
------------
где inputWrapper - врапер для самого file input. Всё это должно находится в relative блоке, чтобы все элементы были корректно спозиционированы

чтобы не быть многословным вот ссылка на живой пример - http://www.fileqube.com/upload
Firebug покажет всю правду :)

gentleman Apr 7 2008 at 15:18

Если я не ошибаюсь, то нулевую прозрачность ставить нельзя - элемент станет не кликабельный. Решая эту же проблему выставлял близкие к нулю значения opacity (0.01)