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

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

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

我的桌面上的以下Excel文件：

1. file1.xlsx
2. file1.xls
3. FILE.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/

Answer 1:

嗯，这是令人尴尬的......我发现我一直在寻找的解决方案，它不能再简单。 我用下面的代码来获得期望的结果。 希望这可以帮助别人的未来。 谢谢大家对你的帮助。

<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 /等），使用：

<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" /> 

DEMO：
http://jsfiddle.net/dirtyd77/LzLcZ/144/

---

注意：

如果你想显示的Excel CSV文件（ .csv ）， 不要使用：

• text/csv
• application/csv
• text/comma-separated-values （ 工作在只有Opera）。

---

如果你想显示一个特定的文件类型 （例如， WAV或PDF ），那么这将几乎总是工作...

 <input type="file" accept=".FILETYPE" />

Answer 2:

这些日子里，你可以只使用文件扩展名

<input type="file" ID="fileSelect" accept=".xlsx, .xls, .csv"/>

Answer 3:

大教堂这个属性是很旧，就在现代浏览器不接受，因为我知道，但这里是它的一个替代方案，试试这个

<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);" />

我想这会帮助你当然你也可以根据自己的需要更改这个脚本。

Answer 4:

我用text/comma-separated-values的CSV MIME类型在接受属性，它在Opera工作正常。 试图text/csv没有运气。

有些人MIME类型为CSV如果建议不工作：

• 文本/逗号分隔值
• 文/ CSV
• 应用程序/ CSV
• 应用程序/ EXCEL
• 应用/ vnd.ms-Excel中
• 应用程序/ vnd.msexcel
• 文/ anytext

来源： http://filext.com/file-extension/CSV

Answer 5:

这并没有为我的Safari 10下工作：

<input type="file" accept=".csv" />

我不得不代替写：

<input type="file" accept="text/csv" />

Answer 6:

你可以知道正确的内容类型通过只是在做下列任何文件：

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);
}

属性接受有一些问题，多属性，不会在这种情况下正常工作。

Answer 7:

我已经修改@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;
}

我有自定义验证的buildin，因为在打开文件窗口中的用户仍然可以选择的选项“所有文件（‘*’）”，如果不管我明确地设置在输入元素的属性接受。

Answer 8:

现在你可以使用新的HTML5输入验证属性pattern=".+\.(xlsx|xls|csv)"

Answer 9:

使用正则表达式会更快

    function checkIsExcel(file) {
        if ((!/.*\.xlsx$/.test(file.name)) && (!/.*\.xls$/.test(file.name)) && (!/.*\.csv$/.test(file.name))) {
            return false;
        }
        return true;
    }

文章来源: HTML Input=“file” Accept Attribute File Type (CSV)