BaBL 4 апр 2008 в 15:31

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

3 мин

Веб-разработка *

+16

Комментарии 53

3al 4 апр 2008 в 15:39

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

BaBL 4 апр 2008 в 15:42

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

BaBL 4 апр 2008 в 15:47

* в <code>

AndryX 4 апр 2008 в 16:02

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

BaBL 4 апр 2008 в 16:44

добавил

elfiki 4 апр 2008 в 16:02

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

BaBL 4 апр 2008 в 16:09

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

elfiki 4 апр 2008 в 16:10

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

BaBL 4 апр 2008 в 16:24

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

Bahusss 4 апр 2008 в 17:22

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

BaBL 4 апр 2008 в 17:27

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

Bahusss 4 апр 2008 в 18:20

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

Tails 4 апр 2008 в 19:39

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

BaBL 4 апр 2008 в 19:53

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

ELV1S 4 апр 2008 в 19:28

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

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

BaBL 4 апр 2008 в 19:52

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

ELV1S 4 апр 2008 в 20:14

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

BaBL 4 апр 2008 в 20:23

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

Zav 5 апр 2008 в 02:17

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

WarGoth 5 апр 2008 в 07:49

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

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

НЛО прилетело и опубликовало эту надпись здесь

WarGoth 5 апр 2008 в 10:33

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

НЛО прилетело и опубликовало эту надпись здесь

WarGoth 5 апр 2008 в 11:14

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

zencd 5 апр 2008 в 04:55

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

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

BaBL 5 апр 2008 в 05:31

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

zencd 5 апр 2008 в 05:36

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

BaBL 5 апр 2008 в 06:02

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

qbique 5 апр 2008 в 13:09

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

gentleman 7 апр 2008 в 11:14

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

qbique 7 апр 2008 в 11:16

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

volk13 5 апр 2008 в 05:36

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

BaBL 5 апр 2008 в 06:00

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

Zeraman 5 апр 2008 в 07:20

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

ganzer 5 апр 2008 в 07:28

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

BaBL 5 апр 2008 в 07:38

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

b3atb0x 5 апр 2008 в 08:07

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

BaBL 5 апр 2008 в 08:47

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

ELV1S 5 апр 2008 в 11:01

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

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

BaBL 5 апр 2008 в 12:20

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

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

tsabu 5 апр 2008 в 10:08

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

BaBL 5 апр 2008 в 10:23

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

qbique 5 апр 2008 в 13:30

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

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

qbique 5 апр 2008 в 13:39

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

BaBL 5 апр 2008 в 14:00

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

qbique 5 апр 2008 в 14: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 7 апр 2008 в 11:18

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