HTML Input =“ file”接受属性文件类型（CSV）

我的页面上有一个文件上传对象：

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

在我的桌面上包含以下excel文件：

1. file1.xlsx
2. file1.xls
3. file.csv

我要上传文件到ONLY显示.xlsx，.xls，和.csv文件。

使用accept属性，我发现这些内容类型负责.xlsx＆.xls扩展...

accept= application / vnd.openxmlformats-officedocument.spreadsheetml.sheet（.XLSX）

accept= application / 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 Files 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/csv
• application/csv
• text/comma-separated-values（仅适用于Opera）。

如果您尝试显示特定的文件类型（例如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在accept属性中使用了CSV mime-type，并且在Opera中工作正常。尝试text/csv没有运气。

如果建议的其他MIME类型为CSV，则为CSV：

• 文字/逗号分隔值
• 文字/ csv
• 应用程序/ csv
• 应用程序/ excel
• 应用程序/vnd.ms-excel
• 应用程序/ vnd.msexcel
• 文字/任何文字

来源：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);

您还可以为输入设置属性“ multiple”，以一次检查多个文件的内容类型，然后执行下一步：

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

属性接受对于多个属性有一些问题，在这种情况下无法正常工作。

我已经修改了@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)"。