RadicalChild 12 сен 2018 в 13:12

Поле загрузки файлов, которое мы заслужили

10 мин

129K

CSS*HTML*JavaScript*Веб-дизайн*Веб-разработка*

Туториал

Из песочницы

+32

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

ThisMan 12 сен 2018 в 13:47

Без рабочей демки как то пресно(

RadicalChild 12 сен 2018 в 15:55

Добавил возможность скачать финальный билд, билд с проблемой с фокусом и билд с мерцанием!

RadicalChild 12 сен 2018 в 18:59

Теперь добавил возможность пощупать, не бейте!

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

fhabr 12 сен 2018 в 15:30

А что, с 2012го успел наступить невиданный прорыв в формах передачи файлов?

Fragster 12 сен 2018 в 16:00

Jquery протух, все используют habr.com/post/150594.

Akuma 12 сен 2018 в 17:43

Да ну, этот фреймворк уже такой старый. Статья 2012 года и в ней написано, что браузеры уже 10 лет его поддерживают. Как минимум 22 года. Дайте человеку попользоваться чем-то современным, стильным и молодежным.

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

RadicalChild 12 сен 2018 в 16:03

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

KYuri 12 сен 2018 в 15:10

Ну ничего, нормальные герои всегда идут в обход

Да, с фокусом тут действительно «в обход».

Я бы просто добавил в разметку аттрибут «tabindex»:

<input id="file-input" type="file" name="file" multiple tabindex="-1">
<label for="file-input" tabindex="0">Выберите файл</label>

И никаких заумных стилей, никакой борьбы с разными браузерами, никаких js-обработчиков…

monochromer 12 сен 2018 в 15:56

Только ни пробелом, ни enter'ом на такой label не нажать. Только мышкой.

RadicalChild 12 сен 2018 в 16:08

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

KYuri 12 сен 2018 в 17:44

Ваш «финальный», с tabindex-ом.
Чем не устраивает вариант с tabindex-ом?

RadicalChild 12 сен 2018 в 18:09

Да, я все же немного накосячил, но! Фокус действительно будет появляться, вот только, как заметил monochromer выше, нажиматься метка будет только мышью.

psycho-coder 12 сен 2018 в 15:26

А мы просто используем plupload.js, который может слать файлы кусками, и не выставлять max_upload_size в сотни МБ.

Nice-L 12 сен 2018 в 15:59

Ваши бы слова, да разработчикам ГИС ЖКХ в уши. Шаблоны по одному грузить — рутина. Встречая разработчиков, думающих об удобстве работы даже в таких, казалось бы, «мелочах» как-то даже вера в будущее просыпается.

chelaxe 12 сен 2018 в 20:07

Еще есть проблемы в ie9 где нет multiple и когда ajax с файлами таки не отправляется и ты используешь iframe. Еще в ie9 другой объект с файлами, там вроде размера нет и еще что-то, кто помнит напомните. Ох в свое время хлебнул для поддержки ie9 с этим полем загрузки файлов.