HTML Input = "file" Принять тип файла атрибута (CSV)

У меня есть объект загрузки файла на моей странице:

<input type="file" ID="fileSelect" />

со следующими файлами Excel на моем рабочем столе:

  1. file1.xlsx
  2. file1.xls
  3. file.csv

Я хочу, чтобы загрузка файла ТОЛЬКО показывала файлы .xlsx, .xls и .csv.

Используя атрибут accept, я обнаружил, что эти типы контента позаботились о расширениях .xlsx и .xls...

accept= application/vnd.openxmlformats-officedocument.spreadsheetml.sheet(.XLSX)

accept= приложение /vnd.ms-Excel (.XLS)

Однако я не могу найти правильный тип содержимого для файла Excel CSV! Какие-либо предложения?

ПРИМЕР: http://jsfiddle.net/LzLcZ/

360
06 авг. '12 в 20:18
источник поделиться
9 ответов

Хорошо, это смущает... Я нашел решение, которое искал, и это не могло быть проще. Для получения желаемого результата я использовал следующий код. Надеюсь, это поможет кому-то в будущем. Спасибо всем за вашу помощь.

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

Допустимые типы приема:

Для файлов CSV (.csv) используйте:

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

Для файлов Excel 97-2003 (.xls) используйте:

<input type="file" accept="application/vnd.ms-excel" />

Для файлов Excel 2007 + (.xlsx) используйте:

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

Для текстовых файлов (.txt) используйте:

<input type="file" accept="text/plain" />

Для файлов изображений (.png/.jpg/etc) используйте:

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

Для HTML файлов (.htm,.html) используйте:

<input type="file" accept="text/html" />

Для видеофайлов (.avi,.mpg,.mpeg,.mp4) используйте:

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

Для аудиофайлов (.mp3,.wav и т.д.) используйте:

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

Для PDF файлов используйте:

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

DEMO:
http://jsfiddle.net/dirtyd77/LzLcZ/144/


ПРИМЕЧАНИЕ:

Если вы пытаетесь отобразить файлы CSV Excel (.csv), используйте НЕ:

  • text/csv
  • application/csv
  • text/comma-separated-values (работает только в Opera).

Если вы пытаетесь отобразить определенный тип файла (например, WAV или PDF), тогда это почти всегда будет работать...

 <input type="file" accept=".FILETYPE" />
950
06 авг. '12 в 22:45
источник

Связанные вопросы


Похожие вопросы

В эти дни вы можете просто использовать расширение файла

<input type="file" ID="fileSelect" accept=".xlsx, .xls, .csv"/>
69
19 сент. '17 в 23:21
источник

Dom этот атрибут очень старый и не принят в современных браузерах, насколько я знаю, но вот альтернатива этому, попробуйте это

<script type="text/javascript" language="javascript">
function checkfile(sender) {
    var validExts = new Array(".xlsx", ".xls", ".csv");
    var fileExt = sender.value;
    fileExt = fileExt.substring(fileExt.lastIndexOf('.'));
    if (validExts.indexOf(fileExt) < 0) {
      alert("Invalid file selected, valid files are of " +
               validExts.toString() + " types.");
      return false;
    }
    else return true;
}
</script>

<input type="file" id="file" onchange="checkfile(this);" />

Я думаю, это поможет вам, конечно, вы можете изменить этот script в соответствии с вашими потребностями.

33
06 авг. '12 в 20:54
источник

Я использовал text/comma-separated-values для CSV mime-type в атрибуте accept, и он отлично работает в Opera. Пробовал text/csv без везения.

Некоторые другие MIME-типы для CSV, если предложенные не работают:

  • текст/значения, разделенные запятыми
  • текст /CSV
  • приложение /CSV
  • application/excel
  • application/vnd.ms-excel
  • приложение /vnd.msexcel
  • Текст /anytext

Источник: http://filext.com/file-extension/CSV

8
05 марта '13 в 23:16
источник

Это не сработало для меня в Safari 10:

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

Мне пришлось написать это вместо:

<input type="file" accept="text/csv" />
6
04 апр. '17 в 11:01
источник

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

1) Выберите интересующий файл,

2) И запустите консоль:

console.log($('.file-input')[0].files[0].type);

Вы также можете установить для вашего ввода атрибут "multiple" для проверки типа содержимого для нескольких файлов за раз и выполните следующее:

for (var i = 0; i < $('.file-input')[0].files.length; i++){
    console.log($('.file-input')[0].files[i].type);
}

Признак атрибута имеет некоторые проблемы с несколькими атрибутами и не работает корректно в этом случае.

3
19 сент. '14 в 6:58
источник

Я изменил решение @yogi. Кроме того, когда файл имеет неправильный формат я reset значение входного элемента.

function checkFile(sender, validExts) {
    var fileExt = sender.value;
    fileExt = fileExt.substring(fileExt.lastIndexOf('.'));
    if (validExts.indexOf(fileExt) < 0 && fileExt != "") {
        alert("Invalid file selected, valid files are of " +
                 validExts.toString() + " types.");
        $(sender).val("");
        return false;
    }
    else return true;
}

У меня есть настраиваемая верификация, потому что в открывшемся окне файла пользователь все равно может выбрать опции "Все файлы (" * ")", независимо от того, явно ли я установлен атрибут accept в элементе ввода.

1
10 авг. '14 в 19:35
источник

Теперь вы можете использовать новый атрибут проверки ввода html5 pattern=".+\.(xlsx|xls|csv)".

0
06 нояб. '13 в 16:45
источник

использование регулярного выражения будет быстрее

    function checkIsExcel(file) {
        if ((!/.*\.xlsx$/.test(file.name)) && (!/.*\.xls$/.test(file.name)) && (!/.*\.csv$/.test(file.name))) {
            return false;
        }
        return true;
    }
-1
27 июля '17 в 6:18
источник

Посмотрите другие вопросы по меткам или Задайте вопрос