Ограничение типов файлов в 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
. Убедитесь, что вы внедрили проверку типов файлов на серверной стороне перед обработкой этих файлов.