13,8 тыс подписчиков

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

20 января 202120 янв 2021

132

3 мин

Оглавление

Введение
1. Простая загрузка файлов
2. Загрузка нескольких файлов

Источник: Nuances of Programming

Введение

Загрузка файлов на различных платформах — это типичная повседневная задача. Без неё трудно представить себе жизнь в современном мире, ведь все мы обмениваемся фотографиями в соцсетях или оставляем резюме на сайтах по поиску работы. И HTML является неотъемлемой частью этого процесса, предоставляя встроенную поддержку загрузки файлов с помощью JavaScript.

В этой статье мы рассмотрим пять различных способов загрузки HTML-файлов.

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

Чтобы использовать функциональность файлового загрузчика, нужно в качестве типа входных данных указать file («Файл»). Рассмотрим пример:


<input type="file" id="file-uploader">

Тип файла с входными данными позволяет пользователям нажатием кнопки загружать один или несколько файлов. После успешной загрузки файл API облегчает чтение файлового объекта с использованием JavaScript. Для этого нужно будет выбрать входные данные в JavaScript, а затем прослушать событие change («Событие изменения») файлового загрузчика. Рассмотрим следующий пример:

Посмотрите на вывод в консоли браузера. Обратите внимание, что массив fileList с файловым объектом содержит всю дополнительную информацию (метаданные) о загруженном файле.

Потренируйтесь в онлайн-редакторе CodePen с тем же примером:

CodePen Embed — File Upload with HTML const fileUploader = document.getElementById(‘file-uploader’); fileUploader.addEventListener(‘change’, (event) => {…codepen.io

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

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


<input type="file" id="file-uploader" multiple />

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

Вот пример на Codepen, если захотите проверить:

CodePen Embed — file upload const fileUploader = document.getElementById(‘file-uploader’); fileUploader.addEventListener(‘change’, (event) => {…codepen.io

3. Метаданные файла

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

Эта информация может быть полезна для дальнейших валидаций и принятия решений.

4. Свойство «Accept»

Чтобы ввести ограничение на тип загружаемых файлов, используют атрибут accept, как в этом примере:


<input type="file" id="file-uploader" accept=".jpg, .png" multiple>

Здесь можно выбрать только файлы с расширением jpg и png.

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

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

Для преобразования файла в двоичную строку используют объект FileReader. Затем добавляют слушатель событий load , чтобы при успешной загрузке файла получить двоичную строку. Посмотрите следующий пример:

Попробуйте загрузить изображение в этот пример на Codepen и посмотрите, что получится.

CodePen Embed — File upload (images) const fileUploader = document.getElementById(‘file-uploader’); const reader = new FileReader(); const imageGrid =…codepen.io

Заключение

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

Спасибо за внимание!