• 2 минуты чтения

• Формы, CSS, Загрузка файлов

• Поделись Твиттер, Линкедин

Ну, мы можем использовать webkitdirectory, нестандартный атрибут, который позволяет пользователям выбирать каталог через ввод файла. В настоящее время поддерживается в Chrome, Firefox и Edge.

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

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

Ах, и если вы хотите создать немного лучший опыт перетаскивания, у Алекса Рирдона есть несколько советов по переосмыслению перетаскивания в целом. Стоит прочтения!

Дополнительные ресурсы:

• FileAPI
  Набор библиотек JavaScript для работы с файлами. Мультизагрузка, перетаскивание и загрузка файлов по частям. Изображения: обрезка, изменение размера и автоматическая ориентация по EXIF.
• Идеи взаимодействия с перетаскиванием
• HTMLInputElement.webkitdirectory
• API файлов и каталогов

Мы рассылаем эти и другие полезные советы и рекомендации для дизайнеров и разработчиков в нашей Smashing Email Newsletter — раз в две недели. (После подписки вы также получаете бесплатную электронную книгу.)