HTMLinput=“文件”接受属性文件types（CSV）
我希望有人能帮助我。
我的页面上有一个file upload对象：
<input type="file" ID="fileSelect" /> 与我的桌面上的以下excel文件：
- file1.xlsx
- file1.xls
- FILE.CSV
我希望file upload只能显示.xlsx ， .xls和.csv文件。
使用accept属性，我发现这些内容types处理.xlsx ＆ .xls扩展名…
accept= application / vnd.openxmlformats-officedocument.spreadsheetml.sheet（.XLSX）
accept= application / vnd.ms-excel（.XLS）
但是，我无法findExcel CSV文件的正确内容types！ 有什么build议么？
示例： http : //jsfiddle.net/LzLcZ/
那么这是令人尴尬的…我find了我正在寻找的解决scheme，它不能简单。 我使用下面的代码来获得所需的结果。 希望这有助于未来的人。 感谢大家的帮助。
<input id="fileSelect" type="file" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" />
有效的接受types：
对于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" />
对于video文件 （.avi，.mpg，.mpeg，.mp4），请使用：
<input type="file" accept="video/*" />
对于audio文件 （.mp3，.wav等），使用：
<input type="file" accept="audio/*" />
对于PDF文件 ，请使用：
<input type="file" accept=".pdf" />
DEMO：
http://jsfiddle.net/dirtyd77/LzLcZ/144/
注意：
如果您尝试显示Excel CSV文件（ .csv ），请不要使用：
-
text/csv -
application/csv -
text/comma-separated-values（ 仅适用于Opera ）。
如果您试图显示特定的文件types （例如， WAV或PDF ），那么这将几乎总是工作…
<input type="file" accept=".FILETYPE" />
Dom这个属性是非常古老的，据我所知在现代浏览器中是不被接受的，但是这里有一个替代scheme，试试这个
<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);" />
我想它会帮助你，当然你可以根据你的需要改变这个脚本。
我已经在接受属性中使用CSV MIMEtypes的text/comma-separated-values ，它在Opera中正常工作。 试过的text/csv没有运气。
如果build议不起作用，其他一些CSV的MIMEtypes：
- 文本/逗号分隔值
- 文/ CSV
- 应用程序/ CSV
- 应用程序/ EXCEL
- 应用/ vnd.ms-Excel中
- 应用程序/ vnd.msexcel
- 文/ anytext
资料来源： http : //filext.com/file-extension/CSV
现在你可以使用文件扩展名了
<input type="file" ID="fileSelect" accept=".xlsx, .xls, .csv"/>
您只需执行以下操作即可知道任何文件的正确内容types：
1）select感兴趣的文件，
2）并在控制台运行这个：
console.log($('.file-input')[0].files[0].type);
你也可以为你的input设置属性“multiple”，一次检查多个文件的内容types，然后执行下一步：
for (var i = 0; i < $('.file-input')[0].files.length; i++){ console.log($('.file-input')[0].files[i].type); }
属性接受有多个属性的问题，在这种情况下不能正常工作。
这在Safari 10下不适用于我：
<input type="file" accept=".csv" />
我不得不写这个：
<input type="file" accept="text/csv" />
我修改了@yogi的解决scheme。 另外，当文件格式不正确时，我重置input元素值。
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; }
我有自定义validationbuildin，因为在打开的文件窗口中，用户仍然可以select“所有文件（'*'）”选项，而不pipe是否显式设置input元素的accept属性。
现在，您可以使用新的html5inputvalidation属性pattern=".+\.(xlsx|xls|csv)" 。
使用正则expression式会更快
function checkIsExcel(file) { if ((!/.*\.xlsx$/.test(file.name)) && (!/.*\.xls$/.test(file.name)) && (!/.*\.csv$/.test(file.name))) { return false; } return true; }
