Zhendalf 4 авг 2008 в 08:12

Стилизация файл-инпутов

5 мин

39K

Интерфейсы *

163

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

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

Butjok 4 авг 2008 в 09:56

Бесполезный комментарий, спасибо.

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

bumbay 23 мар 2012 в 22:14

Справедливо голоса распределились.

MaRio 4 авг 2008 в 09:13

Спасибо, круто)
мне всегда нравилось как инпут.файл реализован в Сафари

donflash 4 авг 2008 в 09:37

Моё мнение: в Safari инпут не "нравится" - там он просто сделан правильно.

ipod 4 авг 2008 в 10:43

Согласен. Что за бред — позволять пользователю вводить в поле всякую чепуху (я про ИЕ).

josser 4 авг 2008 в 11:33

это иногда бывает удобно

Например. Заливаем кучу фоток с именами 001.jpg, 002.jpg, ... что бы не клацать мышкой всё время удобно копипастить путь от туда и править имя файла.

Ну конечно очень нечастый пример, но всёже.

SantaCluster 4 авг 2008 в 13:20

сам частенько так делаю..
надо искать компромиссное решение

ipod 5 авг 2008 в 07:44

бывает, конечно, спору нет. но вы же разработчик. мне было бы приятнее еще многое в браузерах, например, встроенное изменение html и js на лету для своих целей (благих), но разработчики подумали, что в этом нет необходимости (и я согласен).
Не думаю, что разработчики интерфейса Apple сделали так по прихоти...

DeadMoroz 4 авг 2008 в 13:16

а я копирую путь из файлменеджера и вставляю в поле. можно?

korynd 4 авг 2008 в 22:48

А у меня единственное постоянно открытое неконсольное приложение — броузер. Можно?

XuMiX 5 авг 2008 в 02:34

а у меня единственное открытое консольное приложение — Terminal.app, и то он не совсем консольный… Можно?

ipod 5 авг 2008 в 07:33

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

acy 4 авг 2008 в 09:18

Спасибо большое, за интерестный и полезный урок, совсем не помешает. ;)

MniD 4 авг 2008 в 09:23

Спасибо, поюзаем ;)

donflash 4 авг 2008 в 09:26

А как быть при javascript off?

Zhendalf 4 авг 2008 в 09:30

будет показываться обычный файл-инпут. В статье это написано.

donflash 4 авг 2008 в 09:33

Да, вижу, не заметил...
Тогда нет вопросов - всё очень добротно, интересно и... старо, как мир... Но для новичков - будет полезно.

Butjok 4 авг 2008 в 09:43

Ну что за паранойя, что за привычка придираться ко всякой мелочи?
Тем более в статье ясно написано: «Если у пользователя будет отключен JavaScript, он увидит обычный файл-инпут.»
А те пользователи кто живут без JS пусть идут лесом.

Кстати, Zhendalf, спасибо за интересную статью.

donflash 4 авг 2008 в 09:56

"А те пользователи кто живут без JS пусть идут лесом."
Это где вас такому учили? :(

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

donflash 4 авг 2008 в 11:07

Мне искренне жаль таких горе-мастеров...

ionicman 4 авг 2008 в 11:35

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

Делать надо исходя из затрат на поддержку при
отключении JS. Есть старое правило - "Цель оправдывает средства".

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

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

Если же нет, и Вы планируете что просмотр данного сайта будет идти через PC
или же сайт вообще является веб аппликацией - то смысл убиваться за то, чтобы работало без JS нет вообще. Вы много видели браузеров на компьютерах, где отключен JS? Другое дело, что хорошим тоном было бы предупредить человека про JS, если же это все такие случилось.

arthurgrishin 4 авг 2008 в 11:13

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

donflash 4 авг 2008 в 11:40

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

donflash 4 авг 2008 в 12:20

Заминусовали до нельзя :(

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

donflash 4 авг 2008 в 13:12

Судя по Вашей карме вы много кричали "ИЕ - говно" :)

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

donflash 4 авг 2008 в 14:14

Отвечаю на Ваш вопрос:

"Вы много видели браузеров на компьютерах, где отключен JS?"
- Нет, как правило, всё именно так, как Вы говорите. Такие случаи редки, но знаете, часто бывает так, что в 0.01% попадает заказчик сайта, который абсолютно верно будет ездить вам по рогам, если у вас не было такого опыта, то, извините, это Ваше незнание...

emendz 4 авг 2008 в 15:41

Я есть живой контр-пример )
Firefox + NoScript (http://noscript.net/) => по умолчанию все JS отлючены.

nrdcp 4 авг 2008 в 20:11

А для чего? Никогда я этого не понимал.

korynd 4 авг 2008 в 22:49

Для безопасности, например, для производительности.

t1myrkq 4 авг 2008 в 13:46

как ни крути а на js все равно делают такие вещи pngfix и min-weight для IE6, или ктото знает другие решения ;)

n0mini 2 янв 2009 в 17:35

Во-первых — min-width, а во вторых, делают это с помощью CSS или expression() опять же в CSS.

artyfarty 4 авг 2008 в 09:33

Здорово-здорово!
Вот только пользователя может слегка заступорить такая замена, плюс надпись «найти файл» не совсем очевидна.

Zhendalf 4 авг 2008 в 09:35

Возможно. Но текст на картинке мы всегда можем поменять, а вот текст на обычном инпуте - нет.

Nightquest 4 авг 2008 в 09:37

Прекрасно, достойно! Замечательно! Давно не помню такой хорошей статьи, лишний раз появился стимул заходить сюда чаще. Автор — молодец!

Supercharged 4 авг 2008 в 09:40

Есть ли возможность как-то продумать вариант, если пользователь выбрал файл, а потом передумал и захотел оставить поле пустым?

Zhendalf 4 авг 2008 в 09:42

Это сделать вообще нельзя. Мы не можем средствами js изменить value у файл-инпута. Это можно сымитировать, просто убрав текст.

single7 4 авг 2008 в 11:10

Если я не ошибаюсь, присваивать значение инпуту нельзя, но обнулить его, сбросив значение, вполне врзможно.
getElementById("outInput").value = '';

arthurgrishin 4 авг 2008 в 12:17

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

tigrenok 4 авг 2008 в 13:46

а как же кнопка reset и одноименный метод у форм?

bO_oblik 4 авг 2008 в 09:40

Шикарно 0_о

Butjok 4 авг 2008 в 09:50

Вы забыли добавить слово «Хуясе».

bO_oblik 4 авг 2008 в 10:01

Вы забыли, что неприлично перебивать старших ;-)

Butjok 4 авг 2008 в 10:13

Хм, а я и не перебивал.

nine 4 авг 2008 в 10:21

вы забыли катиться к чертям

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

naum 4 авг 2008 в 09:42

Низкий поклон. Полностью согласен, от и до. Mac-style это практически всегда простой, удобный user-oriented (идеальный) вариант. Взял на заметку для использования, в том числе, и в некоторых win32-приложениях.

ssneg 4 авг 2008 в 09:43

Качественная статья, спасибо.

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

emendz 4 авг 2008 в 09:57

А можно ли все-таки дополнительно дать информацию о пути к файлу?
В тултипе, например.

Butjok 4 авг 2008 в 10:02

Не стоит, если пользователь только что выбрал файл, он не может забыть какой именно.

Zhendalf 4 авг 2008 в 10:05

оно не будет мешать - путь будет появляться при наведении на название файла.

Zhendalf 4 авг 2008 в 10:02

согласен. Надо будет в финальной версии этого скрипта сделать. Только полный адрес можно будет получить не во всех браузерах. fileInput.value в некоторых браузерах возвращает полный путь, в некоторых только название файла. Сейчас уже точно не помню где как.

xfenix 4 авг 2008 в 10:01

Спасибо, очень полезно.

Если кому интересно продолжение темы кастомизации "непокорных" элементов, то
- Кастомайз select'а http://designformasters.info/posts/select-replacement/
- Кастомайз radio&checkbox http://lipidity.com/fancy-form/
- Кастомайз скролла http://www.hesido.com/web.php?page=customscrollbar

Все решения полнофункциональны, т.е. селект работает с клавиатурой (клавиши вверх, вниз и т.п.), скролл реагирует на колесо мыши и якоря.

Zhendalf 4 авг 2008 в 10:06

хорошие ссылки. Спасибо ;)

deerua 4 авг 2008 в 10:08

вы попробуйте в тот селект (откастомайзеный) вставить больше 20 элементов, не будет окошка выбора со скролом, будет галимая бесконечная лента! А если элементов больше 1000? так будет вообще полная попа. раздосадная штука! у гугла есть рабочие семплы нормально изменённых селектов, и работают они быстрее!

Zhendalf 4 авг 2008 в 13:00

а можно подробнее про рабочие семплы?

xfenix 4 авг 2008 в 14:20

Мне бы тоже было интересно.
А пока я нашел другой вариант, где скролл не превращается в "галимую ленту": http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/ (тем не менее первый вариант для небольших селектов очень приятен)

deerua 4 авг 2008 в 14:29

а понту, опять минус просто так поставят
что за люди

revenant 4 авг 2008 в 10:03

Отличная идея. А то вечно приходится влазить в этот textbox, прокручивать текст и смотреть, тот ли я файл выбрал.

А можно сделать, чтобы после выбора можно было навести курсор на имя файла и увидеть полный путь во всплывающем комментарии или в строке статуса?
Просто часто полезно глянуть лишний раз, что отправляешь - иногда не только имя, а если там untitled.zip, то и путь. Путь гораздо реже нужен, но хотелось бы не терять эту информацию, а просто убрать её "поглубже".

revenant 4 авг 2008 в 10:03

Упс, уже написали выше

single7 4 авг 2008 в 10:09

Вариант когда картинки выключены тоже нужно обсчитывать иначе инпут не видно

edelweard 4 авг 2008 в 10:10

Шикарно. Просто блеск. Я не думал, что это вообще возможно, а здесь — классная идея и красивая реализация. Пожалуй, лучшее из технического, что я прочитал на Хабре.

beono 4 авг 2008 в 10:12

Круто, но я предлагаю не делать свои костыли а рядом с input-файлом повесить ссылку "К сожаление разработчики %браузер% не всегда знают о своих косяках. Откройте им глаза!". Ну а при клике через аякс вызыввается скрипт отсылающий письмо с текстом "Ещё один посетитель нашего сайта недоволен работой вашего браузера. Просим вас устранить %неисправность%" на support@mozilla.org или куда там ещё.

kosiakk 4 авг 2008 в 10:13

для Java уже есть великолепная реализация на JSF от RichFaces:

http://livedemo.exadel.com/richfaces-demo/richfaces/fileUpload.jsf

Красивый GUI, множественный выбор, *прогресс загрузки*

fuksito 4 авг 2008 в 10:13

ООО. Я уже такое делал но чуть по иному и у меян в опере невыходело сделать и ховер тоже невыходил, а тут все есть, плюс однозначно !

RumataEstora 4 авг 2008 в 10:17

В целом очень-очень красиво реализовано.
Чуть-чуть, самую малость, критики и предложений по улучшению.

В функции HandleChanges() можно и нужно упростить регулярное выражение до одной строки
fileTitle = fileInput.value.replace(/.*[\\\/]/, '');

И сократите такие вещи как:
case 'avi': pos = '112'; break;
case 'wmv': pos = '112'; break;
case 'flv': pos = '112'; break;

до
case 'avi':
case 'wmv':
case 'flv': pos = '112'; break;

Zhendalf 4 авг 2008 в 10:24

это да. Спасибо.

TiGR 4 авг 2008 в 10:29

fileTitle = fileInput.value.replace(/.*[\\\/]/, '');

Спорно. А что если в одном пути будут и прямые и обратные слеши?

Zhendalf 4 авг 2008 в 10:35

а разве в названии файла в юникс-системах могут быть слеши? В виндуз - нет. То есть в адресе не может быть одновременно разных видов слешей.

TiGR 4 авг 2008 в 11:23

Теоретически, могут: /home/user/nazvanie\ s\ probelami

Но я не уверен в том, как браузеры это дело обрабатывают — сохраняют ли экранирование, не проверял.

bormotov 4 авг 2008 в 17:30

в виндовсе



D:\>dir "d:\tmp/tmp1\tmp2"

 Том в устройстве D не имеет метки.

 Серийный номер тома: 9C70-5B85



 Содержимое папки d:\tmp\tmp1\tmp2



04.08.2008  21:26    <DIR>          .

04.08.2008  21:26    <DIR>          ..

04.08.2008  21:26    <DIR>          tmp3

               0 файлов              0 байт

               3 папок  153 398 829 056 байт свободно

пример надуман, но вменах файлов виндос (кажется начиная с w2k, может и раньше), вполне себе понимает прямой слеш как разделитель каталогов

silverwind 4 авг 2008 в 18:55

Очень сомневаюсь, что при использовании стандартного диалога ОС Виндовс выбора файла, он (диалог) вернет путь к файлу с разносторонними слешами одновременно!

bormotov 4 авг 2008 в 18:59

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

onk 5 авг 2008 в 06:42

а а если так:

dir /tmp
>dir /tmp
Ошибка в формате параметра: "mp".

такчто не все так гладко как хотелосьбы

bormotov 5 авг 2008 в 06:45

если так, то "/" обрабатывается в другом месте.
Правильнее всего из программы проверять, конечно

grossu 4 авг 2008 в 10:21

Еще у инпута в Safari есть безоговорочный плюс. Можно просто сделать драг-н-дроп своего файла прямо на кнопку.

RJD2 4 авг 2008 в 10:23

круто, сколько таит сафари в себе открытий чудных.

danilsomsikov 4 авг 2008 в 10:35

Да-да-да, это ведь и есть самое главное достоинство (на мой взгляд) Сафаревского инпута.

RJD2 4 авг 2008 в 10:22

хм, мало юзал сафари и не знал, про это. В сафари действительно продуманей сделано, спасибо за инфу.

TiGR 4 авг 2008 в 10:31

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

yellow_duck 5 авг 2008 в 12:49

можно гораздо проще. Увеличить размер шрифта + position:absolute; right:0;

TiGR 5 авг 2008 в 15:28

Это не всегда сработает, в первую очередь в случае широких кнопок.

Chupa 4 авг 2008 в 10:32

Только вот если ваша кнопка большая по ширине, то все, ку-ку досвидос.

TiGR 4 авг 2008 в 10:52

http://habrahabr.ru/blog/ui_design_and_u…

Chupa 4 авг 2008 в 11:17

Лишний гемор. Лучше так поступить: http://habrahabr.ru/blog/ui_design_and_usability/48274.html#comment1040613

Banzeg 4 авг 2008 в 10:33

Недавно с товарищем как раз спорили по этому поводу. Благодарю за статью.

Chupa 4 авг 2008 в 10:43

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

NeOn4eG 4 авг 2008 в 10:58

Вот так выглядит в IE 7
ie7

RomanNikitin 4 авг 2008 в 12:00

А у вас случайно не IE8beta1 в режиме эмуляуции IE7 ? там могут быть всякие глюки с CSS...

NeOn4eG 4 авг 2008 в 12:11

и правда, что-то я стормозил.. это бета ie8.. в ie7 проверил, всё ок...

WarGasm 4 авг 2008 в 11:17

Спасибо, добавил в избранное)

quark 4 авг 2008 в 11:31

Хммм... Хью Лори... Свой человек :)

Пасибо за инфу, все никак не мог найти толкового туториала на эту тему...

Sergant4x4 4 авг 2008 в 11:35

Респект за статью.. обязательно буду юзать...

ЗЫ.. добавил в избранное

Aloner 4 авг 2008 в 11:48

Насущно. Спасибо.
Отдельный респект за "Hugh Laurie - Silent Night.mp3" :)

romanoza 4 авг 2008 в 12:02

На яндекс почте такое реализовано (почти такое)

romanoza 4 авг 2008 в 12:13

romanoza 4 авг 2008 в 12:23

извините, не разобрался пока, как тут парсер работает, вижу, что странно, через тег img не вставилась картинка:
http://smages.com/i/91/de/91de029bad5689bb1332b62af55edbfb.png

yellow_duck 5 авг 2008 в 12:51

width height не указал наверное

romanoza 5 авг 2008 в 13:22

неа, все указал, ну да не важно - оффтоп

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

Zhendalf 4 авг 2008 в 12:29

Что-то никто не отозвался по поводу asp.net контрола. Или здесь нету дотнет-прогеров?

Chupa 4 авг 2008 в 12:51

Можно поподробнее?

Zhendalf 4 авг 2008 в 12:59

в asp.net 2.0 есть встроенный объект, называется FileUpload. Единственное чем он отличается от файл-инпута - тем что он серверный контрол.
Точно также можно сделать и с моим файл-инпутом. Можно добавить некоторые свойства, например количество файл-инпутов, генерируемых изначально или возможность добавления новых.
Пример - телериковский файл-аплод. Сделан он криво, в некоторых браузерах работает меньшая часть кнопки. Да и стоит много уёв. Но на него можно посмотреть, чтобы понять о чем я говорю.

onk 4 авг 2008 в 13:42

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

IMHO можно спокойно использовать описанную методику практически ничего не изменяя
не говоря уже о том что создать пользовательский контрол из fileUpload с этой методикой

вспомнилось... когда уже сделают мультиаплоад в браузерах? (в свое время нашел единственный вариант - на флеше. но там не все просто с сессией asp.net2)

alkk 4 авг 2008 в 13:01

С регекспами косяки:

1) не нужно два, достаточно одного: /.*[\/\\](.*)/
2) этот код:
var RegExExt =/.*.(.*)/;

должен быть таким:
var RegExExt =/.*\.(.*)/;

lahmatiy 4 авг 2008 в 13:02

Может вашу функцию немного переписать?



function HandleChanges(){

  var pos = ['doc', 'bmp', 'jpg', 'jpeg', 'png', 'gif', 'psd', 'mp3', 'wav', 'ogg', 'avi',

             'wmv', 'flv', 'pdf', 'exe', 'txt'].indexOf(fileInput.value.match(/\.([a-z]{3,4})\s*$/)[1]);

  fileName.style.display = 'block';

  fileName.style.background = 'url(images/icons.png) no-repeat 0 -' + (pos < 0 ? 176 : pos * 16) + 'px';

}

Да [].indexOf не будет работать во всех браузерах, тогда добавим



  if (!Array.prototype.indexOf)

    Array.prototype.indexOf = function(value){

      for (var i = 0; i < this.length; i++) 

        if (this[i] === value)

          return i;

      return -1;

    }

Ну или перебор массива добавляем в код функции.

Suomi 4 авг 2008 в 13:11

Отлично, и с рабочего стола переносятся файлы на кнопку. В избраное.

Suomi 4 авг 2008 в 13:11

Упс, не туда.

Zhendalf 4 авг 2008 в 14:36

тогда в файле с иконками должны быть повторения: jpeg,jpg - это одна и та же иконка. А если мы захотим что-то добавить, несмотря на то, что иконка уже в файле есть, все равно придется переделывать не только js, но и файл с иконками.

lahmatiy 6 авг 2008 в 10:35

Я ожидал такого вопроса, все зависит от вашей задачи (условий). Тогда можно было бы сделать так (еще проще):

function HandleChanges(){

  var ext = fileInput.value.match(/\.([a-z]{3,4})\s*$/)[1];

  var extList = ['doc', 'bmp', 'jpg|jpeg', 'png', 'gif', 'psd', 'mp3',

                 'wav', 'ogg', 'avi', 'wmv', 'flv', 'pdf', 'exe', 'txt'];

  for (var pos = 0; pos < extList.length; pos++)

    if (new RegExp('^(' + 'jpg|jpeg' + ')$', 'i').test(ext))

      break;



  fileName.style.display = 'block';

  fileName.style.background = 'url(images/icons.png) no-repeat 0 ' + (-pos * 16) + 'px';

}

В любом случае switch в решении этой задачи неоптимален.

lahmatiy 6 авг 2008 в 10:37

Сорри ошибочка вышла. Имелось ввиду



if (new RegExp('^(' + extList[pos] + ')$', 'i').test(ext))

Zhendalf 6 авг 2008 в 11:50

Ага, классно. Спасибо Вам в карму за оптимизацию.

Zhendalf 7 авг 2008 в 16:33

Почему-то сработало только в файерфоксе. Ослик не показал иконку.

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

SiriusLamp 4 авг 2008 в 13:06

Было бы здорово создать для общего пользования .net компонент :)

alexnd 4 авг 2008 в 13:22

понравилось :) зачет!

onk 4 авг 2008 в 13:33

красиво !
интересно можно ли это решение к фоксу прикрутить в виде addon или greacemonkey (или как оно правильно пишется)

Delka 4 авг 2008 в 15:39

Отлично, но осталось несколько проблем. Первая: в разметке большое количество дивов, которые портят семантику.

`<div class="blocker">` - ненужен:

1. input полностью прозрачен, скрывать нечего
2. div.blocker прозрачен тоже (там в бэкграунде transparent.gif)

`<div id="activeBrowseButton">` - лишняя сущность

нужно просто добавлять класс .active к fakeButton, где спрайтами меняется фон.

При таком бешенном пиаре (временно.нет тут, временно.нет там, открываешь архив с примером - там url-файл лежит, даже вконтакте - и там вступите в группу временно.нет... ) - таких ошибок быть недолжно, неважно генерится это в js или нет.

whoami 4 авг 2008 в 15:44

Вы теоретик? :)
Даже у прозрачного input'a есть непрозрачный мигающий курсор в поле ввода.

Delka 4 авг 2008 в 18:57

нет я практик и всегда проверяю то что пишу, просто код оптимизировал сразу, чтоб там input обрезаелся wrapper'ом и в любом случае по нему нельзя кликнуть - не по чему, поэтому и не проверял такое.

а за информацию - спасибо, интересный прикол)

Zhendalf 4 авг 2008 в 16:27

activeBrowseButton нужет чтобы плавно можно было менять изображение: он появлялся при наведении(вначале оно было на jQuery с анимацией). А блокер, как уже сказали - нужен, чтобы не появлялся текстовый курсор при наведении.
Вы с внимательностью отнеслись к статье - за это спасибо. Но вы не все заметили.
В разметке, вообще говоря, не нужен враппер - его можно создать, и уже внутрь пихать все что нам надо. И это не все.
Финальный код будет в пятничных сниппетах бешенно пиарящегося временно.нет =)
И еще по поводу бешенного пиара - мы стараемся писать хорошие и интересные веб-разработчикам статьи. Пишем не для себя - поэтому и стараемся сообщить о себе как можно большему количеству людей.

Delka 4 авг 2008 в 19:16

статья действительно хорошая и что немаловажно своя, а не гугло-собрания из рубрики "28 способов сделать обтекание картинки текстом" :)
молодцы.
но вёрстка избыточна и весьма спорна.

как бы я сделал вёрстку:
#wrapper классом (т.к. их много по странице может быть)
с {position: relative; _zoom: 1} чтобы держать элементы внутри
с {overflow: hidden} чтобы левая часть input[file] (где путь к файлу и может быть курсор) невылезала из контейнера и немешалась.
input[file] не нужен position: absolute и z-index, пусть просто стоит в потоке - оно спокойнее
div.fakeButton ненужен float: left, всё равно всё тут абсолютно позицируется, зачем лишнее? а вот z-index: -1 и top и left по нулям обязательно.
div#FileName - тоже классом и вместо margin'ов лучше задавать ему его родные top и left - надёжней и логичней.
всё - blocker ненужен, а раз анимацию ценой jQuery не делаете (слава богу) то можно и спрайты использовать внутри одного блока fakeButton.

За статью спасибо.

whoami 4 авг 2008 в 15:42

А вариант без blocker'a не подходит для кнопки?

darchik 4 авг 2008 в 15:56

Классная фишка! Спасибо, возьму на заметку )

d1Mm 4 авг 2008 в 16:08

Ещё "кликабельные области и их размеры" зависят от используемой темы Windows. Например, в классическом стиле размеры будут отличаться от стандартной темы XP или Vista Aero

Tishka17 4 авг 2008 в 16:37

К сожалению, не знаю, как это сделано в сафари. Но, имхо, неправильно определять тип файла по расширению.

NikitaOFF 4 авг 2008 в 16:42

Реальная штука, вообще пятерка, так держать;)

ainu 4 авг 2008 в 16:53

Невозможное — возможно.
Впору писать кому-нибуть проект с названием «50 вещей, которые считаются невозможными»

null 4 авг 2008 в 17:00

Это просто мегакруто.
Авторам увага =)

kr1z 4 авг 2008 в 17:06

Спасибо.
Все прекрасно работает

iSlayter 4 авг 2008 в 17:07

Товарищи, я одного понять не могу! А как на вКонтакте после того, как я выбираю файл показывается его размер!? сразу после выбора! не понимаю! как!?!?!?

iSlayter 4 авг 2008 в 17:30

SWFupload там... эх :)

MaxQ 4 авг 2008 в 17:22

жаль в ie5.5, ie8b1 не работает :(

gta4kv 4 авг 2008 в 17:43

А по мне, так легче под все браузеры подогнать, чем портить сайт JavaScript'om.
Ну, не портить конечно, но минус в юзабилити если он отключен.

gta4kv 4 авг 2008 в 17:53

А автору все равно респект.

Glook 4 авг 2008 в 18:32

симпатично? возможно. интересно? несомненно.

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

ganzer 4 авг 2008 в 19:22

Ща любители рюшечек навставляют.

glazs 4 авг 2008 в 18:35

Мне почему-то кажется, что кастомизация форм — дело темное, и никому, кроме злоебучего дизайнера, не нужное.
Потому что пользователь привык к тому, как выглядят формы. Пользователь привык к тому, как этими формами управлять с клавиатуры. Пользователь может отключить графику, и может отключить JS. Пользователь может зайти на сайт с PDA, и отключить на нем графику.

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

Но стоит ли заниматься подобной буней, тратитя на ее доведение до ума недели, когда пользователям это не нужно?

Glook 4 авг 2008 в 20:20

об этом и речь... я аргументирую нежелание изменять глобально вид формы:
1) пользователь привык за несколько лет уже к такому их виду
2) более громоздкий код
3) графика, которая может не загрузиться
4) js, который по-моему мнению имеет другое назначение
5) время уходящее на подгонку всего этого к нормальному виду во всех браузерах

У дизайнера "аргумент" следующий:
"Так круче", "мне так хочется", "я видел такое там-то..."

Glook 5 авг 2008 в 08:25

и кстати, кто-нибудь из утверждающих, что поле ввода не нужно и им никто не пользуется проводил какие-то исследования на эту тему или говорит опираясь на свой опыт? лично я пользуюсь полем ввода довольно часто: например в "админке" wordpress при загрузке нескольких файлов мне удобнее один раз нажав на кнопку выбрать файл, а затем просто скопировав путь к нему вставить его в остальные поля ввода, заменив только одну цифру (файлы предварительно пронумерованы). И считаю, что очень удобно, когда поле ввода большое и видно весь путь.

вместе с тем, я согласен, что дизайн по-умолчанию не особо изящный и хотелось бы иметь больше возможностей изменять его (к примеру кнопку сделать более симпатичную, надпись поменять...) И без использования таких громоздких решений. По я против такого кардинального изменения как удаление поля вообще и считаю, что желание дизайнеров непременно сделать этот элемент "как в safari" как минимум необосновано.

ganzer 6 авг 2008 в 01:50

Присоединяюсь к аргументам по поводу полного пути. Часто, имя файла, само по себе, ни о чем не говорит.

sirus 4 авг 2008 в 18:52

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

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

mas 4 авг 2008 в 20:00

> В Опере и IE мы можем написать адрес файла вручную (сомневаюсь, что кто-либо когда-либо пользовался этой возможностью).

Не сомневайтесь, пользуюсь каждый день. ^C в ТоталКоммандере, ^V в браузере.

mas 4 авг 2008 в 20:05

> В Опере и IE мы можем написать адрес файла вручную (сомневаюсь, что кто-либо когда-либо пользовался этой возможностью).

Не сомневайтесь, пользуются. Очень удобно взять полное имя в ТоталКоммандере и выдавить его в браузере.

pipe 4 авг 2008 в 22:24

Есть одна проблема, которая, как мне кажется, не затронута в статье:

Как будет работать данное решение, если загрузка происходит медленно (инпут размещен на реальном сайте, на "тяжелой странице").

Решение дописывать JS по onload черевато тем, что пока onload не "выстрелил" пользователь будет видеть обычный инпут, который потом "мигнув" заменится на эту красоту.

Чтобы избежать подобных метаморфоз (особенно это полезно когда кастомных контролов много на странице) и не обидеть пассажиров без JS (их кстати больше, чем вы думаете, смею заметить) я использую специальный файл стилей noscript.css где все "навороты" прячутся от несчастного без-JSника.

Подключаю его внутри head:

Насколько мне известно, это невалидное решение, но во всех целевых браузерах (в ИЕ6 тоже) работает без помех.

Postum 5 авг 2008 в 08:04

Немножко багов:

1) Максимально допустимое имя файла в виндах невозможно выбрать этим контролом ("Копия Копия Копия Копия Копия Копия Копия Копия Копия Копия Копия Копия Копия Копия Копия Копия Копия Копия Копия Копия Копия Копия Копия Копия Копия Копия Копия Копия Копия Копия Копlemon.jpeg")

2) Если имя укоротить, но оставить длинным, то оно отобразится рядом с инпутом в 2-3 строки и из-за этого фоновая картинка с пиктограммой становится двойной или тройной пиктограммой. Т.е. идею с одной пиктограммой надо откалибровать или перейти к отдельным пиктограммам.

(Сижу в ИЕ6 под XP)

amaysuradze 6 авг 2008 в 07:02

Одно хочу добавить, в сафари под Mac Os X вот на такое поле с инпутом файл можно просто перетащить. Именно этого не хватает мне в виндовсе. А квадратная кнопка или круглая по большому счету неважно.