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

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

Но одним из самых сложных полей ввода для редактирования является поле загрузки. Это элемент ввода HTML по умолчанию, который позволяет пользователям загружать файлы со своего компьютера. Рестайлинг поля загрузки — серьезная проблема по сравнению с другими элементами формы.

Если вы надеетесь настроить входные данные для загрузки, эта галерея поможет. Я собрал 9 самодельных полей загрузки из CodePen, которые доказывают, что вы можете изменить стиль поля, чтобы оно выглядело так, как вы хотите.

1. Загрузка плоского файла

Разработчик Уоллес Эрик создал это плоское поле для загрузки, используя лишь немного CSS и JavaScript. Он заимствует тенденцию плоского дизайна, который избегает градиентов, сосредотачиваясь на отдельных цветах — часто с монохромной цветовой схемой.

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

Он работает так, как вы ожидаете, и работает со стандартным элементом ввода HTML. Так что это также можно использовать в старых браузерах и должно работать и на мобильных устройствах.

2. Пользовательская загрузка файлов

Вот дизайн, который становится немного более абстрактным с полем загрузки. Разработчик Аарон Вэнстон создал эту загрузку файлов как копию тех, которые мы видим на более крупных веб-сайтах.

Подумайте о крупных технологических сайтах, таких как Dropbox, Google+ и Facebook. У них часто есть область перетаскивания с большим пространством «нажмите здесь», чтобы запустить окно загрузки. Это именно то, что Аарон сделал с этим фрагментом.

Он полагается на jQuery и большое количество JS/CSS для работы. И хотя он использует стандартное поле ввода HTML, он также обрабатывает процесс загрузки с помощью пользовательских функций JS.

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

3. Адаптивный анимированный загрузчик

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

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

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

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

4. Пользовательский загрузчик

Ежедневные проекты разработчиков — отличный способ отточить свои навыки. Дрю Восбург использовал этот подход, чтобы создать удобную форму загрузки, бесплатно размещенную на CodePen.

Он сильно настроен с помощью функций JavaScript, обрабатывающих эффект перетаскивания. Но это поле ввода на самом деле построено так, чтобы поддерживать касание и щелчок, а также перетаскивание.

Интерактивная область представляет собой метку HTML, стилизованную с помощью CSS. Этот элемент метки прикреплен к полю ввода, которое скрыто за пределами страницы. Он работает так же, как кликабельное поле. Определенно умная идея, и она полностью семантична для загрузки.

5. Интерфейс загрузки фото

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

Он работает, извлекая изображения через JavaScript, а затем преобразовывая их в base64 для встраивания в CSS.

Всякий раз, когда вы загружаете изображения на сервер, они создают временный файл. На своем собственном сервере вы можете использовать этот временный файл для отображения изображения. Но теперь, когда CSS поддерживает base64, это еще одна альтернатива.

Интерфейс супер-чистый, а функция загрузки вписывается в него.

6. Простой синий интерфейс загрузки

Если вы ищете поле загрузки без JS, взгляните на этот пример, созданный Стивеном Бейкером.

Он использует чистый CSS3 для преобразования стиля ввода в одну большую кнопку. Он работает со значком загрузки Font Awesome и просто оборачивает всю круглую область вокруг поля загрузки.

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

7. Вход для загрузки пользовательского файла jQuery

Разработчик Терри Янг взял немного jQuery и использовал его для улучшения некоторых существующих полей загрузки. Это результат (и это чертовски результат, если можно так выразиться).

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

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

8. Входной файл плоского пользовательского интерфейса

Вот немного другое плоское поле загрузки, созданное Джеффри Крофтом. Этот также использует JavaScript, но стилизует весь ввод с помощью свойств CSS3.

Поскольку это пример фрагмента, вы не можете никуда загружать файлы. Но это достаточно легко изменить, если вы переместите это на свой собственный сайт. Основной дизайн и настройка — это то, что придает жизни этому фрагменту.

Функция возврата работает в JavaScript, так что именно там вы будете обрабатывать загрузку файлов, изменения на экране или что-то еще.

Лучше всего эти коды работают в браузерах начиная с IE 8! Так что это довольно надежный вариант, если вы беспокоитесь о доступности.

9. Поля мульти-загрузки

Вот еще одно настраиваемое поле с изюминкой: оно выглядит довольно просто эстетически, но настоящий приз заключается в функциональности.

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

С помощью этого фрагмента вы можете перечислить все имена файлов в одном поле загрузки. Вы даже можете использовать JavaScript, чтобы добавить эти имена файлов в другое место на странице на видном месте.