10 полезных советов для веб-разработчиков по загрузке файлов в HTML

От автора: возможность загрузки файлов является ключевым требованием для многих веб- и мобильных приложений. От загрузки фотографии в социальные сети до публикации резюме на веб-сайте портала о вакансиях file upload — везде. Как веб-разработчики, мы должны знать, что HTML обеспечивает нативную поддержку загрузки файлов с небольшой помощью JavaScript.

С помощью HTML5FileAPI добавляется в DOM. Используя это, мы можем внутри его прочитать FileList и FileObject. Это дает несколько вариантов использования файлов, их можно загружать локально или отправлять на сервер по сети для обработки, и так далее.

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

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

1. Простая загрузка файла.

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

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

При успешной загрузке File API позволяет прочитать Fileobject с помощью простого кода JavaScript. Чтобы прочитать Fileobject, нам нужно получить ответ от команды change в загрузчике файлов. Сначала получите загрузчик файлов по идентификатору.

Затем добавьте прослушиватель событий change для чтения файла после завершения загрузки. Мы получаем информацию о загруженном файле из свойства event.target.files.

Рассмотрим ответ в консоли браузера. Обратите внимание на массив FileList с объектом File, который содержит всю информацию о метаданных загруженного файла.

10 полезных советов для веб-разработчиков по загрузке файлов в HTML

Вот CodePen для вас с тем же примером для дальнейшего изучения.

2. Загрузка нескольких файлов

Мы можем загружать несколько файлов за раз. Для этого нам просто нужно добавить атрибут с именем multiple, к тегу input.

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

10 полезных советов для веб-разработчиков по загрузке файлов в HTML

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

3. Информация о метаданных файлов.

Каждый раз, когда мы загружаем файл, объект File содержит информацию о метаданных, такую как имя файла, размер, время последнего обновления, типы т. д. Эта информация может быть полезна для дальнейших проверок и принятия решений.

Вот результат для загрузки одного файла.

10 полезных советов для веб-разработчиков по загрузке файлов в HTML

Используйте этот CodePen для дальнейшего изучения.

4. Свойства accept

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

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

10 полезных советов для веб-разработчиков по загрузке файлов в HTML

Используйте этот CodePen, чтобы изучить атрибут accept.

5. Управление содержимым файла.

Вы можете захотеть показать содержимое файла после его успешной загрузки. Что касается изображений профиля, это будет сбивать с толку, если мы не покажем загруженное изображение пользователю сразу после загрузки. Мы можем использовать объект FileReader для преобразования файла в двоичную строку. Затем добавьте прослушиватель событий load, чтобы получить двоичную строку при успешной загрузке файла.

Попробуйте выбрать файл изображения в CodePen ниже и посмотрите, как он отображается.

6. Проверка размера файла.

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

Попробуйте загрузить файл разного размера, чтобы увидеть, как работает проверка, ссылка на codepen:

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

7. Показать прогресс загрузки файла

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

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

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

8. Как насчет загрузки каталога?

Можем ли мы загрузить весь каталог? Что ж, это возможно, но с некоторыми ограничениями. Существует нестандартный атрибут (по крайней мере, на момент написания статьи) webkitdirectory который позволяет нам выгружать каталог целиком.

Хотя изначально он был реализован только для браузеров на основе WebKit, webkitdirectory также можно использовать в Microsoft Edge, а также в Firefox 5.0 и более поздних версиях. Однако, несмотря на то, что он имеет относительно широкую поддержку, он все же не является стандартом и не должен использоваться, если у вас нет альтернативы. Вы можете указать этот атрибут как:

Это позволит вам выбрать папку (также известную как каталог).

10 полезных советов для веб-разработчиков по загрузке файлов в HTML

Пользователь должен предоставить подтверждение для загрузки каталога.

10 полезных советов для веб-разработчиков по загрузке файлов в HTML

Как только пользователь нажимает кнопку «Загрузить», происходит загрузка. Здесь следует отметить один важный момент. Массив FileList будет содержаться информацию обо всех файлах в загруженном каталоге как плоскую структуру. Но ключ в том, что для каждого из объектов File атрибут webkitRelativePath будет иметь путь к каталогу.

Например, давайте рассмотрим каталог main и другие папки и файлы в нем.

10 полезных советов для веб-разработчиков по загрузке файлов в HTML

Теперь объекты File будут заполнены webkitRelativePath:

10 полезных советов для веб-разработчиков по загрузке файлов в HTML

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

9. Давайте перетащим файд и загрузим

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

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

Получите dropzone и области содержимого по их соответствующим идентификаторам.

Добавьте обработчик событий dragover, чтобы показать эффект от того, что будет скопировано.

10 полезных советов для веб-разработчиков по загрузке файлов в HTML

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

Попробуйте перетащить файл изображения в примере CodePen ниже и посмотрите, как он работает. Не забудьте также посмотреть код для рендеринга сброшенного изображения. Ссылка CodePen:

10. Управление файлами с помощью objectURL

Существует специальный метод URL.createObjectURL() для создания уникального URL из файла. Вы также можете вызвать его с помощью метода URL.revokeObjectURL().

Методы URL.createObjectURL() и URL.revokeObjectURL() позволяют создавать простые строки URL-адресов, которые можно использовать для ссылки на любые данные, на которые можно ссылаться с помощью объекта файла DOM, включая локальные файлы на компьютере пользователя. Простое использование URL-адреса объекта:

Используйте этот CodePen для дальнейшего изучения URL-адреса объекта. Подсказка: сравните этот подход с подходом, упомянутым в пункте 5 ранее.

Заключение

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

Автор: Tapas Adhikary

Источник: blog.greenroots.info

Редакция: Команда webformyself.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Full-Stack практика. Создание JavaScript блога

Создание веб-приложения с нуля на JavaScript, NodeJS, ExpressJS

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Комментирование закрыто.