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

Я надеялся, что кто-то может помочь мне.

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

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

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

  1. file1.XLSX-файл
  2. file1.в XLS
  3. .csv

Я хочу загрузить файл в только показать .xlsx, .xls, & .csv файлы.

С помощью accept атрибут, I нашел эти типы контента позаботились о .xlsx & .xls расширения...

accept= application / vnd.openxmlformats-officedocument.spreadsheetml.лист.( Файлы XLSX)

accept= application / vnd.ms-excel (.XLS) и

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

пример:http://jsfiddle.net/LzLcZ/

9 ответов


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

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

Допустимые Типы Accept:

на 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" />

на Текстовые Файлы (.тхт) использовать:

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

на Файлы Изображений (.формат PNG./jpg / etc), используйте:

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

на HTML-файлы (.htm,.html), используйте:

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

на Видеофайлы (.Ави .миль на галлон. ,mpeg,.mp4), используйте:

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

на Аудио Файлы (.МР3, .wav, etc), использовать:

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

на PDF-файлы использовать:

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

демо:
http://jsfiddle.net/dirtyd77/LzLcZ/144/


Примечание:

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

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

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

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

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

<input type="file" ID="fileSelect" accept=".xlsx, .xls, .csv"/>

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);" />

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


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

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

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

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


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

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

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

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

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

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

2) и запустите в консоли это:

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

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

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

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


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

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 во входном элементе.


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


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

    function checkIsExcel(file) {
        if ((!/.*\.xlsx$/.test(file.name)) && (!/.*\.xls$/.test(file.name)) && (!/.*\.csv$/.test(file.name))) {
            return false;
        }
        return true;
    }