HTML输入="文件"接受属性文件类型(CSV)

Question

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

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

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

Answer 2

这些天你可以使用文件扩展名

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

Answer 3

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

我想它会帮助你,当然你可以根据你的需要改变这个脚本.

Answer 4

我text/comma-separated-values在accept属性中使用了CSV mime-type,它在Opera中运行正常.试了text/csv没运气.

如果建议不起作用,则其他一些用于CSV的MIME类型:

• 文本/逗号分隔值
• 文/ 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

只需在 out 的操作 atr 中写下您想要接受的扩展名，以逗号分隔即可

<input type="file" accept=".any, .ext, .you, .want">

Answer 7

例如，除了最佳答案之外，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" />

Answer 8

您只需执行以下操作即可知道任何文件的正确内容类型：

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

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

Answer 9

经过我的测试，在\xe3\x80\x90macOS 10.15.7 Catalina\xe3\x80\x91上，\xe3\x80\x90Dom / Rikin Patel\xe3\x80\x91的答案无法正常识别[.xlsx]文件。

\n

我个人总结了大部分现有答案的做法，并通过了亲身测试。总结一下以下几个答案：

\n

\n

accept=".csv, .xls, .xlsx, text/csv, application/csv,\ntext/comma-separated-values, application/csv, application/excel,\napplication/vnd.msexcel, text/anytext, application/vnd. ms-excel,\napplication/vnd.openxmlformats-officedocument.spreadsheetml.sheet"\n

\n

\n