[Из песочницы] Поле загрузки файлов, которое мы заслужили

Скрипты и советы | 12 сентября 2018 1 573

Уроки CSS на Хабрахабре, habrahabr.ru, Разработка веб-сайтов

Все течет, все меняется, но только input[type=file] как портил нервы всем начинающим веб-разработчикам, так и продолжает это делать до сих пор. Вспомните себя N лет назад, когда вы только начинали постигать азы создания веб-сайтов. Молодой и неопытный, вы искренне удивлялись, когда кнопка выбора файла напрочь отказывалась менять цвет своего фона на ваш любимый персиковый. Именно в тот момент вы впервые столкнулись с этим несокрушимым айсбергом под названием «Загрузка файлов», который и по сей день продолжает «топить» начинающих веб-разработчиков.

На примере создания поля для загрузки файлов я покажу вам, как правильно прятать input[type=file], настраивать фокус на объекте, у которого фокуса быть не может, обрабатывать события Drag-and-Drop и отправлять файлы через AJAX. А также я познакомлю вас с парой браузерных багов и путями их обхода. Статья написана для новичков, но в некоторых моментах может быть полезна и занимательна даже для матерых разработчиков.
Читать дальше →
[Frontend Практика #1] Drag and Drop, Превью изображения, Средний цвет изображения и Отдельный поток

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

Подробнее
[Перевод] Анализ файлов robots.txt крупнейших сайтов

Robots.txt указывает веб-краулерам мира, какие файлы можно или нельзя скачивать с сервера. Он как первый сторож в...

Подробнее
Drag-&-Drop компоненты для слепых пользователей? Вы шутите?

Что объединяет Trello, Gmail, Aviasales и Google Keep? В каждом из них есть Drag-&-Drop-компоненты, которые можно...

Подробнее
20 Ajax эффектов, которые должен знать веб-разработчик (1-5)

На сайте nettuts.com была опубликована статья с примерами и исходниками 20 Ajax эффектов, способных придать вашему сайт...

Подробнее
[Из песочницы] Как я создал свой первый сайт и что из этого вышло

Это longread, в котором я поделюсь своими успехами и трудностями, с которыми я столкнулся в процессе создания своего...

Подробнее
[Перевод] Скрытые возможности элемента <input>

Элемент в HTML самый интересный. Большинство его собратьев вне зависимости от своих атрибутов ведут себя одинаково. При...

Подробнее

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

В связи с новыми требованиями законодательства РФ (ФЗ-152, ФЗ «О рекламе») и ужесточением контроля со стороны РКН, мы отключили систему комментариев на сайте.

🔒 Важно Теперь мы не собираем и не храним ваши персональные данные — даже если очень захотим.

💡 Хотите обсудить материал?

Присоединяйтесь к нашему Telegram-каналу:

https://t.me/tcsecms

Нажмите кнопку ниже — и вы сразу попадёте в чат с комментариями