На что способен FileList API в JavaScript и как его использовать.
FileList API дает вам полный контроль над выбранным пользователем файлом, и с его помощью вы можете выполнять проверку файла.
Я покажу вам некоторые вещи, которые вы можете проверить в файле с помощью API FileList.
Предположим, у меня есть ввод файла ниже:
Когда я перезагружаю свою HTML-страницу и выбираю некоторые изображения, именно так я извлекаю выбранные файлы как объект.
Вот превью:
Вы можете видеть, что FileList — это объект, внутри которого есть другие свойства.
В объекте FileList:
- Вы можете получить количество файлов, выбранных пользователем, через свойство
length. - Вы можете получить больше информации о выбранном файле, используя числовой индекс
0...(length - 1)
На изображении выше видно, что длина равна 6, а это означает, что пользователь выбрал 6 файлов. Таким образом, файлы будут иметь индекс от 0 до (6–1), т.е. от 0 до 5.
Это полезно, если вы хотите просмотреть каждый из файлов, выбранных пользователем.
Свойства объекта API FileList
Теперь поговорим подробнее о свойствах, содержащихся в выбранном файле.
- последнее изменение
timestamp
Это дата последней модификации файла, представленная в виде метки времени.
Чтобы управлять датой, передайте отметку времени конструктору Date.
- lastModifiedDate
Date
Это полная дата последнего изменения файла.
- имя
string
Это имя файла.
- размер
integer
Это размер файла в байтах.
- введите
string
Это MIME-тип файла.
Напомним, вот изображение, показывающее свойства FileList API:
Перебор файлов
Теперь давайте узнаем, как мы можем просмотреть каждый из файлов, выбранных пользователем, и выполнить их проверку.
API FileList предоставляет данные в виде объекта, поэтому нам нужно написать цикл, который будет проходить через этот объект и извлекать нужные нам данные.
Если вы не читали мою предыдущую статью о том, как зациклить объект в JavaScript, вот ссылка на статью.
Когда вы выполните приведенный выше код, вы увидите, что мы можем перебирать объект и выводить каждый из файлов.
Теперь мы готовы проверить файлы.
Проверка
Проверка размера
Напомним, что размер конкретного файла возвращается как bytes.
Предполагая, что пользователю разрешено выбирать файлы размером не более 2 МБ, я выполню проверку именно так.
- Преобразование 2 МБ в байты.
- Прокручивайте файлы и сохраняйте их размеры.
- Проверьте, не превышает ли общий размер 2 МБ.
Проверка типа
Теперь, предполагая, что пользователю разрешено выбирать только файлы изображений, я буду выполнять проверки именно так.
- Создайте массив, в котором будут храниться типы файлов изображений.
- Прокрутите файлы и проверьте, не соответствует ли какой-либо файл требуемому типу.
Вот что происходит, когда я выбираю некоторые файлы, которые не поддерживаются.
Проверка расширений файлов
Для моей последней проверки я хочу, чтобы пользователь предоставил файлы с расширением «.png, .jpg, .jpeg», и любой файл, который не соответствует расширению, будет помечен как неподдерживаемый тип файла.
Чтобы выполнить эту проверку, я буду:
- Сохраните необходимые расширения файлов в массиве.
- Прокрутите файлы и получите их имена.
- Извлеките расширение файла из имени, а затем сравните его с требуемыми расширениями файлов.
Вот что происходит, когда я выбираю файлы, которые не поддерживаются:
Я надеюсь, что благодаря тому небольшому упражнению, которое мы здесь сделали, вы сможете полностью понять, на что способен FileList API в JavaScript, в том числе как его использовать.
Я хотел бы получить ваш вклад в эту статью.
Дополнительный
Я создал и запустил библиотеку JavaScript на NPM, которая способна проверять ваши внешние формы с использованием регулярных выражений, правил проверки и входных атрибутов формы.
С помощью этой библиотеки вы можете проверять все типы ввода формы, включая проверку файлов и проверку длины.
- Проверьте эту библиотеку на NPM:
- Проверьте эту библиотеку на GitHub:
- Ознакомьтесь с документацией:
Спасибо.
Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter и LinkedIn. Посетите наш Community Discord и присоединитесь к нашему Коллективу талантов.
