Ограничение типов файлов в HTML: .xlsx, .xls, .csv

Быстрый ответ

Если загрузка CSV-файлов является вашей задачей, решение можно представить так:

<input type="file" accept=".csv, text/csv">

Данный код осуществляет настройку элемента ввода таким образом, чтобы принимались только CSV-файлы. Для этого проверка осуществляется порасширению файла (.csv) и MIME-типу (text/csv).

Применение атрибута accept для работы с различными типами файлов

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

<input type="file" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel">

Таким образом, будут приниматься файлы .csv, .xlsx и .xls. Это можно представить как приемник документов в табличном формате, все иные файлы будут игнорироваться.

Обеспечение кроссбраузерной совместимости

Однако необходимо учитывать, что некоторые специализированные браузеры, такие как Opera, могут не поддерживать MIME-тип .csv. Но проблема легко решается с помощью альтернативных MIME-типов:

<input type="file" accept=".csv, text/csv, application/csv, application/excel, application/vnd.ms-excel, application/vnd.msexcel, text/anytext">

Подробнее об этом расскажет наш спикер на видео

Возможность проверки типов файлов с помощью JavaScript

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

function checkFile(input) {
  var validExts = ['.csv', '.xlsx', '.xls'];
  if (validExts.indexOf(input.value.substr(input.value.lastIndexOf('.'))) == -1) {
    alert(`Извините, допускаются только файлы с расширениями ${validExts.toString()}.`);
    return false;
  }
  return true;
}

А что, если применить onchange event для мгновенной проверки типов файлов в процессе их загрузки?

<input type="file" onchange="checkFile(this);">

Вот так это просто!

Обращение внимания на старые или не распространенные браузеры

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

Изучение атрибута accept

Защита пользовательского опыта

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

Определение приоритетов

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

Обеспечение совместимости с браузерами

Прежде чем использовать accept в полной мере, проверьте его совместимость с браузерами. Это поможет вам избежать нежелательных сюрпризов. Важными источниками информации являются MDN и Can I Use.

Визуализация

Атрибут accept можно представить как фильтр, пропускающий только определенные MIME-типы или расширения файлов.

Accept: 📑 ТОЛЬКО CSV

| Тип файла    | Принимается? |
| ------------ | ------------- |
| 📑 CSV       | ✅ Да         |
| 📄 PDF       | ❌ Нет        |
| 📄 DOCX      | ❌ Нет        |

На диаграмме выше показано, как атрибут accept фильтрует файлы в поле ввода.

Особенности работы с типами файлов

Загрузка изображений

Если вам нужно загрузить несколько изображений, используйте:

<input type="file" accept="image/*">

Просто и ясно, никаких лишних действий!

Загрузка только PDF

Если требуется принимать только PDF-документы:

<input type="file" accept=".pdf">

Ведь когда вы запрашиваете PDF, вы наверняка ожидаете получить именно его!

Осторожность при работе с некорректно введенными данными

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

Полезные материалы

1. <input type="file"> – HTML: HyperText Markup Language | MDN
2. HTML Input="file" Accept Attribute File Type (CSV) – Stack Overflow
3. HTML input accept Attribute – W3Schools
4. HTML Standard – WHATWG
5. RFC 7111 – URI Fragment Identifiers for the text/csv Media Type
6. File API – W3C
7. Content-Type fields in MIME – W3C