HTML Input= "file" Accept Attribute File Type (CSV)

Question

HTML Input= "file" Accept Attribute File Type (CSV)

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

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

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

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

file1.XLSX-файл

file1.xls

.csv

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

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

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

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

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

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

728 9

html input file-upload csv content-type

9 ответов:

Comments

Ничего не найдено.

Dom · Accepted Answer · 2016-03-30 08:15:08

Ну это неловко... Я нашел решение, которое искал, и это не могло быть проще. Я использовал следующий код, чтобы получить желаемый результат. Надеюсь, это поможет кому-то в будущем. Спасибо всем за вашу помощь.
<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" />
на Видеофайлы (.Ави .миль на галлон. ,mpeg,. mp4), использовать:
<input type="file" accept="video/*" />
на Аудио Файлы (.МР3, .WAV, и т. д.), использование:
<input type="file" accept="audio/*" />
на PDF-файлы использовать:
<input type="file" accept=".pdf" /> 
демо:
http://jsfiddle.net/dirtyd77/LzLcZ/144/

Примечание:

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

text/csv

application/csv

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

если вы пытаетесь отобразить конкретный тип файла (например, a WAV или PDF), то это будет почти всегда работать...
 <input type="file" accept=".FILETYPE" />

Big Money · Accepted Answer · 2017-09-19 23:21:48

в эти дни вы можете просто использовать расширение файла
<input type="file" ID="fileSelect" accept=".xlsx, .xls, .csv"/>

yogi · Accepted Answer · 2012-08-06 20:54:04

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);" />
Я думаю, это поможет вам конечно, вы можете изменить этот скрипт в соответствии с вашими потребностями.

jaysponsored · Accepted Answer · 2017-06-25 16:59:18

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

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

текст / через запятую-значения

text / csv

application / csv

application / excel

application / vnd. ms-excel

application / vnd.msexcel

text / anytext

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

trojan · Accepted Answer · 2017-04-04 11:01:16

это не сработало для меня в Safari 10:
<input type="file" accept=".csv" />
Я должен был написать вместо этого:
<input type="file" accept="text/csv" />

opiumind · Accepted Answer · 2017-02-08 13:57:26

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

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

2) и запустить в консоли это:
console.log($('.file-input')[0].files[0].type);
вы также можете установить атрибут "несколько" для вашего ввода, чтобы проверить content-type для нескольких файлов одновременно и сделать следующее:
for (var i = 0; i < $('.file-input')[0].files.length; i++){
    console.log($('.file-input')[0].files[i].type);
}
атрибут accept имеет некоторые проблемы с несколькими атрибутами и не работает правильно в этом случае.

RenatoIvancic · Accepted Answer · 2016-06-30 20:24:29

Я изменил решение @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 в элементе ввода.

iiic · Accepted Answer · 2016-06-15 13:20:22

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

pimkle · Accepted Answer · 2017-07-27 06:18:47

использование регулярных выражений было бы быстрее
    function checkIsExcel(file) {
        if ((!/.*\.xlsx$/.test(file.name)) && (!/.*\.xls$/.test(file.name)) && (!/.*\.csv$/.test(file.name))) {
            return false;
        }
        return true;
    }