HTML Input=“file” 接受属性文件类型 （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);" />

我想它会对你有所帮助，当然你可以根据需要更改这个脚本。

好吧，这很尴尬......我找到了我一直在寻找的解决方案，它再简单不过了。我使用以下代码来获得所需的结果。

<label for="fileSelect">Spreadsheet</label>
<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/csv
• application/csv
• text/comma-separated-values (仅适用于 Opera）。

如果您尝试显示特定的文件类型（例如，a 或 ），那么这几乎总是有效的......WAVPDF

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

原因如下：

这些类型通常表示打开文件的位置。 例如，Abode Reader。 但是，当上传此文件时，浏览器并不关心打开并询问该应用程序。但是，扩展名或键入的单词（如 MIME 或 etcetera ）可直接应用于文件单元。application image audio

可以将它们用于 DOM 实例。 因此，您应该使用扩展格式名称。 在许多设备上，如手机，当您单击选择文件时，可以看到用户菜单中未接受的文件以灰色排除在外。 祝您度过愉快的时光！File

我在 accept 属性中使用了 CSV mime 类型，它在 Opera 中工作正常。尝试过没有运气。text/comma-separated-valuestext/csv

其他一些 CSV 的 MIME 类型（如果建议不起作用）：

• text/逗号分隔值
• 文本/csv
• 应用程序/csv
• 应用程序/Excel
• 应用程序/vnd.ms-excel
• 应用程序/vnd.msexcel
• 文本/任意文本

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

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

我修改了@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 属性。"All files ('*')"

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

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

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

这在 Safari 10 下对我不起作用：

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

我不得不写这个：

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

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

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

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

经过我的测试，在【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"

您可以使用以下接受类型

<input id="upload_file" accept="image/png,image/jpg,image/jpeg,.doc, .docx,.xls,.xlsx,.pdf,.csv," name="upload_file" type="file"/>

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

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