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

UFO just landed and posted this here

absolvo Apr 10 2009 at 17:42

Я сам не сторонник изменять системные элементы, но порою это всё-таки необходимо.

kellas Apr 11 2009 at 00:06

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

unicast Apr 10 2009 at 17:51

Нихьт:
Mozilla/5.0 (X11; U; Linux i686; ru; rv:1.9.0.5) Gecko/2008122011 Iceweasel/3.0.7 (Debian-3.0.7-1)

absolvo Apr 10 2009 at 17:59

Просто не кликается? Или выглядит не так, как надо?

unicast Apr 10 2009 at 18:05

Сорри, всё ок. Я в точку кликал ((((:

absolvo Apr 10 2009 at 18:14

Это счётчик =)

piupiu Apr 10 2009 at 18:22

Очень понравилось — «на мой взгляд» =)
А по теме — я за стандартные элементы. Только.

rnbparty Apr 10 2009 at 18:31

хотя бы сделали курсор одинаковый что ли. в фф слева текстовый, правее дефолтный.
идеологически плохая задумка, скверно выполненная
ссылки по теме
habrahabr.ru/blogs/webdev/22926/
habrahabr.ru/blogs/la_france/13704/

absolvo Apr 10 2009 at 18:35

С курсорами и прочими красивостями надо ещё поработать, я с вами согласен.
По поводу идеологии — можно подробнее? Про что вы?

Всё различие между тем, что показали вы, и тем, что показал я — это наличие поля, с адресов самого файла на вашей машине и полное отсутствие яваскрипта в вышеописанном варианте. Из-за последнего пункта, как мне кажется, способ имеет право на жизнь, пусть не везде и не всегда его можно применять.

Кстати, по второй ссылке в комментариях увидел примерно то, о чём я писал. Ну это было очевидно, что я не Америку открыл.

-1

zerobrain Apr 10 2009 at 18:40

Неясно, зачем это надо делать. Имя файла не видно, превью картинки тоже просто так не сделать. Крайне неудобно для пользователя. В качестве лабораторного примера сойдет, но на хабр-то это зачем?

Если добавлять яваскриптовые или средства сюда, то получится снова не то: автор говорит исключительно про вариант с версткой. С предыдущим «оратором» согласен. Сделано не айс

taliban Apr 11 2009 at 00:28

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

rnbparty Apr 10 2009 at 18:43

соглашусь — отсутствие js явный плюс!
идеология в том, что это как минимум должна быть кнопка (она ассоциируется с действием). то есть хотя бы вместо дива label или inpu type=button/image или а, соответсующе оформленные. title немного спасает положение, помогая пользователю понять, что он может совершить какое то действие

absolvo Apr 10 2009 at 18:52

Можно навести красоту, к примеру, написав на самой картинке — «выбрать файл», сделать заголовок текстом над картинкой, поместив его в label. Способов показать пользователю, что при нажатии будет такой-то экшен довольно много (правда к стандартному виду файл инпута вообще не надо пояснений — но речь не об этом).

Это же просто пример (пример именно того кода, что находится в топике) — не относитесь к нему серьёзно — это незаконченный продукт, а сырая болванка.

Возможно его и правду не надо было выкладывать на Хабр.

UFO just landed and posted this here

panlancelot Apr 23 2009 at 02:00

так всегда было и видимо будет — форум, те же яйца только в профиль =)

panlancelot Apr 23 2009 at 01:59

приятный и прозрачный код, спасибо.

lightcyber Apr 10 2009 at 19:17

Напишите плз как можно на flash сделать множественный выбор файлов (через ctrl) в окне выбора.

-2

ivv Apr 10 2009 at 19:46

можно использовать готовый аплоадер на флеше, demo.swfupload.org

очень гибко настраивается и довольно неплохо работает.

sunnybear Apr 10 2009 at 19:43

прикольно. У меня в левом нижем углу относительно блока в FF3 моргает курсорчик. Маленький такой, пикселя 2.

django Apr 10 2009 at 19:47

vremenno.net/design/file-inputs-styling/

rmaksim Apr 10 2009 at 20:25

margin-left:-450px; — это что бы на саму кнопку попасть???
а если вместо отступа просто float:right; для инпута сделать

absolvo Apr 10 2009 at 20:28

Для инпута можно direction: rtl;

rmaksim Apr 10 2009 at 20:34

да, видел как у твоего коллеги сделано
ну тут собственно и оптимизировать больше нечего…

imalcolm Apr 10 2009 at 20:34

absolvo Apr 10 2009 at 20:36

Спасибо!

А работает? :)

imalcolm Apr 10 2009 at 20:37

айдафон не умеет отправлять файлы) там всё строго) ни вздохнуть ни пёрнуть)

absolvo Apr 10 2009 at 20:37

Ой — не знал :)

-1

homm Apr 10 2009 at 22:12

Раз уж темя про инпуты — у оперы есть замечательные типы инпута type=«url» и type=«email».

shergin Apr 10 2009 at 22:15

Этому способу уже сто лет, но знают его и пользуют действительно единицы.
Первый раз я его увидил на Новом интерфейсе Яху-почты, только там они для скрытия input используют более корректную технику — css2:clip;

absolvo Apr 10 2009 at 23:14

Параметр clip работает только для абсолютно позиционированных элементов, что невсегда удобно.

shergin Apr 10 2009 at 23:24

Да, это верно, но можно использовать схему relative -> absolute.

absolvo Apr 10 2009 at 23:29

Ну тогда ценность в виде лёгкости clip'a изчезает :)

yellow_duck Apr 14 2009 at 19:40

Дедкэт, че яндексоиды правда пользуются я.почтой?

shergin Apr 14 2009 at 19:53

Это к чему вопрос?.. Почтой Яндекса пользуются все, и, да, она клевая.
Я говорил о Yahoo Mail, который открылся года 3 назад, и да, она не клевая.

Nail13 Apr 11 2009 at 01:05

Браузер FF2, в приведенном вами демо: активная область (там где воспринимается клик) смещена примерно 15px вправо, то есть левая часть кнопки не реагирует на клики (курсор попадает в file-name-field).
Спасет direction: rtl

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

UFO just landed and posted this here

almalexa Apr 11 2009 at 15:18

Не трогайте оценку этого коммента! Она гармонична!

gorinich Apr 11 2009 at 11:56

Когда-то давно делал почти так же
gorinich.net/posts/8

sdmitry Apr 11 2009 at 13:35

По поводу невозможности вставить адрес файла через копи-паст, то есть обходной манёвр. Уже в самом диалоге выбора файла можно запросто вставлять полный путь файла и смело жать «Открыть».

ChemAli Apr 11 2009 at 18:56

В варианте Вашего друга у меня диалог выбора файла открывается только по двойному клику.
IE8 + GreenBrowser.

WoZ Apr 12 2009 at 12:33

встретил бы просто так, не знаю что где-то тут кнопка загрузки — никогда бы не нажал. воспринимается как картинка и взгляд не цепляется, как за инпут.

absolvo Apr 12 2009 at 16:10

Это же пример — картинка может быть любой, именно той, что поможет пользователю понять, в чём тут дело :)

yellow_duck Apr 14 2009 at 19:39

Чувак, че-то в сафари 4(10.5.6) не очень. Т.е. работает только верхняя часть. А большая часть картинки не хочет.

viruseg Jun 20 2016 at 03:05

Как-то слишком много ненужных свойств для инпута прописано.
Вполне достаточно:

input {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
}

На самом деле margin лишний, но мало ли он нужен в каких-то старых браузерах.

Show the best of all time