我的页面上有一个文件上传对象：
<input type="file" ID="fileSelect" />
在我的桌面上使用以下 excel 文件：
- 文件1.xlsx
- 文件 1.xls
- 文件.csv
我希望文件上传只显示.xlsx, .xls, &.csv文件。
使用该accept属性，我发现这些内容类型负责.xlsx&.xls扩展...
accept= 应用程序/vnd.openxmlformats-officedocument.spreadsheetml.sheet (.XLSX)
accept= 应用程序/vnd.ms-excel (.XLS)
但是，我找不到 Excel CSV 文件的正确内容类型！有什么建议么？
示例：http: //jsfiddle.net/LzLcZ/
嗯，这很尴尬......我找到了我正在寻找的解决方案，而且再简单不过了。我使用以下代码来获得所需的结果。
<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" />
演示：http:
//jsfiddle.net/dirtyd77/LzLcZ/144/
笔记：
如果您尝试显示 Excel CSV 文件 ( .csv)，请勿使用：
text/csvapplication/csvtext/comma-separated-values（仅适用于 Opera）。如果您尝试显示特定的文件类型（例如 aWAV或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-type，它在 Opera 中运行良好。尝试text/csv没有运气。
如果建议不起作用，则其他一些用于 CSV 的 MIME 类型：
来源： http: //fileext.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);
您还可以为您的输入设置属性“multiple”，以一次检查多个文件的内容类型，然后执行以下操作：
for (var i = 0; i < $('.file-input')[0].files.length; i++){
console.log($('.file-input')[0].files[i].type);
}
属性接受对多个属性有一些问题，在这种情况下无法正常工作。
除了最佳答案之外，例如，CSV 文件在 macOS 下报告为 text/plain，但在 Windows 下报告为 application/vnd.ms-excel。所以我用这个：
<input type="file" accept="text/plain, .csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" />
我已经修改了@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;
}
我有自定义验证内置，因为在打开的文件窗口中，用户仍然可以选择“所有文件（'*'）”选项，无论我是否在输入元素中明确设置了接受属性。
经过我的测试，在【macOS 10.15.7 Catalina】上，【Dom / Rikin Patel】的回答无法正常识别[.xlsx]文件。
我个人总结了大部分现有答案的做法，并通过了个人测试。总结以下答案：
accept=".csv, .xls, .xlsx, text/csv, application/csv, text/comma-separated-values, application/csv, application/excel, application/vnd.msexcel, text/anytext, application/vnd. ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
现在您可以使用新的 html5 输入验证属性pattern=".+\.(xlsx|xls|csv)"。