Comments 53
Неплохо бы добавить noscript.
Дайте ссылку на страницу с демонстрацией :)
http://habrahabr.ru/blog/la_france/24341.html
Кстати, в сафари кнопка выбора находится совсем в другой стороне...
В FF2 вручную вбить имя файла у меня не получилось.
Этот приём давно описал Peter-Paul Koch. Styling an input type="file" (кстати, первая ссылка в гугле по запросу css input type file).
Сам пользовался им.
Сам пользовался им.
swf-upload юзаем, и костумайзем все как хотим :)
Фул фьючед демо
На нем, впринципе, можно сделать любые формы + красивый статус закачки :)
Единственное, он флеш юзает.
Фул фьючед демо
На нем, впринципе, можно сделать любые формы + красивый статус закачки :)
Единственное, он флеш юзает.
>Единственное, он флеш юзает
А потому не пригоден для закрытых частей сайта. Есть решения и этой проблемы, но они не достаточно элегантны и оставляет хорошую дырку в безопасности ваших сессий. По-моему с этими аплоад-боксами вообще ничего не надо делать. Лишние навороты.
А в других случаях swf-upload - отличное решение.
А потому не пригоден для закрытых частей сайта. Есть решения и этой проблемы, но они не достаточно элегантны и оставляет хорошую дырку в безопасности ваших сессий. По-моему с этими аплоад-боксами вообще ничего не надо делать. Лишние навороты.
А в других случаях swf-upload - отличное решение.
UFO just landed and posted this here
Управление загрузками полностью отдается flash-плееру. Он постом отправляет файлы из очереди. Дело в том, что он не передает в заголовках кукисы, а значит и сессию. Решение заключается в том, чтобы передавать строку сессии методом GET. Например, когда я прикручивал этот загрузчик в CakePHP, то там приходилось отключать проверку User Agent'a чтобы сессия оставалась валидной (а у плеера строка user agent'a совсем иная, чем у используемого браузера).
Все это вкупе открывает дырку в безопасности для похитителей сессий.
Все это вкупе открывает дырку в безопасности для похитителей сессий.
UFO just landed and posted this here
Пытался решить эту проблему на flasher.ru
Тщетно
Тщетно
А вот я в Gmail встречал такую фичу: при клике на обычную ссылку, ссылка заменялась на INPUT FILE и диалог выбора файла выскакивал сам. Но долго эта фича почему-то не прожила.
Как, интересно, такое делается…
Как, интересно, такое делается…
да просто вешается на ссылку обсервер (ну или напрямую onclick), который заменяет outer.div.innerHTML (или span) на форму ввода файла. Можно и через DOM добавить новые элементы, но он существенно медленней.
делается через функцию click() для file input element. поддерживает её исключительно ИЕ
работает очень просто document.getElementById('fileInput').click()
работает очень просто document.getElementById('fileInput').click()
В FF 3,05b под мак само поле ввода не активно. И никак не хочет активизироваться=) Кнопка работает как надо.
А в чем смысл то?
почему-то кажется бредом. Наверное пока не столкнусь с острой необходимостью - не пойму смысле этих действий
когда работаешь над сайтами для каких-нибудь промо кампаний, там каждый пиксель и тень скурпулезно отрисовываются и все контролы стилизуются под общий вид страницы, стандартным там просто нет места.
Это очень плохо. И для верстальщика и для пользователя. Верстальщику лишний геморрой, пользователю непривычные контролы.
Есть исключения, не спорю, но они довольно редки.
Есть исключения, не спорю, но они довольно редки.
Я с тобой согласен, если речь идет о хабрахабре или еще каком-нибудь общественном портале, но если речь про "лицо компании", то там эти проблемы никого уже не волнуют.
Аналогия из "материальной жизни", сосед взял Nokia 8800, сделал 1 звонок - батарея почти сдохла. Он поперся в сервис и получил там ответ: "Ты с него звонить собрался? Этот телефон не для звонков, он для того, чтоб ты пришел, достал его из кармана и показал что оно у тебя есть. А если звонить хочешь - бери себе вдобавок 1100 и заряжай раз в неделю". Тут ситуация та же. Имидж стоит дорого и за такие сайты тоже платят много.
Аналогия из "материальной жизни", сосед взял Nokia 8800, сделал 1 звонок - батарея почти сдохла. Он поперся в сервис и получил там ответ: "Ты с него звонить собрался? Этот телефон не для звонков, он для того, чтоб ты пришел, достал его из кармана и показал что оно у тебя есть. А если звонить хочешь - бери себе вдобавок 1100 и заряжай раз в неделю". Тут ситуация та же. Имидж стоит дорого и за такие сайты тоже платят много.
кнопка browse на один пиксель ниже чем поле ввода
знакомая техника :)
есть мелкая, но решаемая проблема. Разная ширина кнопки Browse в разных браузерах и, как следствие, можно попасть вместо кнопки в само поле. я решал это путём запихивания инпута в див, который по размерам идентичен кнопке. overflow:hidden прятал само поле ввода. а если размер шрифта сделать болшьшим (скажем > 18px), то кнопка browse занимает всю площадь ограничивающего блока.
вот как выглядит примерно
если интересно, есть ссылка на рабочий пример )
есть мелкая, но решаемая проблема. Разная ширина кнопки Browse в разных браузерах и, как следствие, можно попасть вместо кнопки в само поле. я решал это путём запихивания инпута в див, который по размерам идентичен кнопке. overflow:hidden прятал само поле ввода. а если размер шрифта сделать болшьшим (скажем > 18px), то кнопка browse занимает всю площадь ограничивающего блока.
вот как выглядит примерно
если интересно, есть ссылка на рабочий пример )
странно, но тег IMG не обработался.. вот прямой линк на картинку с пояснениями http://www.fileqube.com/hl/OtiRhLG3200/custom_input.gif
такую идею тоже прорабатывал, от нее остался overflow:hidden; на рилфайле, но, столкнулся с проблемой выравнивания по правому полю кнопки, чтобы левая часть уходила "в div". В мозилле и опере работало, а ИЕ упорно задвигал саму кнопку вправо. Если есть кроссбраузерный CSS, напечатайте пожалуйста.
не совсем суть понял :) стиль использовался вот такой
------------
.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 покажет всю правду :)
------------
.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 покажет всю правду :)
в Opera 9.50 выглядит страшно.
А есть решения, чтоб изменить надпись Browse на, к примеру, "Выбрать файл" ?
Может кто-то знает как на поставить другой курсор?
Sign up to leave a comment.
Кастомайзим INPUT FILE.