HTML Input= "file" принять тип файла атрибута (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) и
однако я не могу найти правильный тип контента для файла 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 во входном элементе.
использование regex будет быстрее
function checkIsExcel(file) {
if ((!/.*\.xlsx$/.test(file.name)) && (!/.*\.xls$/.test(file.name)) && (!/.*\.csv$/.test(file.name))) {
return false;
}
return true;
}