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

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

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

<标签= " fileSelect " >表格> < /标签 <input id="fileSelect" type="file" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml。盾板,应用程序/。ms excel " / >

有效的接受类型:

对于CSV文件(.csv)，使用:

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

对于Excel Files 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)，请不要使用:

文本/ csv 应用程序/ csv 文本/逗号分隔值(仅适用于Opera)。

---

如果你试图显示一个特定的文件类型(例如，WAV或PDF)，那么这将几乎总是工作…

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

原因如下:

应用程序类型通常意味着打开文件的位置。 例如，Abode Reader。 但是当这个文件上传时，浏览器并不关心打开并询问该应用程序。但扩展，然而，或键入字，如MIME图像或音频等工作直接应用到文件单元。

可以将它们与File DOM实例关联使用。 因此，您应该使用扩展格式名称。 在许多设备上，如手机，它是看到当你点击选择文件，非接受的文件在用户菜单中被排除在灰色… 有一个伟大的时间花在您的文件!

我在accept属性中使用了文本/逗号分隔的CSV mime-type值，它在Opera中工作得很好。尝试了text/csv，但运气不好。

如果建议的不工作，其他一些mime类型用于CSV:

文本/逗号分隔值 文本/ csv 应用程序/ csv 应用程序/ excel 应用程序/ vnd.ms-excel 应用程序/ vnd.msexcel 文本/ anytext

来源: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;
}

我有自定义验证内置，因为在打开的文件窗口中，用户仍然可以选择选项“所有文件('*')”，无论我是否显式地设置输入元素中的接受属性。

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

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

Attribute accept对于多个属性有一些问题，在这种情况下不能正确工作。

在Safari 10下，这对我来说行不通:

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

我不得不这样写:

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

现在你可以只使用文件扩展名

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

除了最上面的答案之外，例如，CSV文件在macOS下报告为文本/纯文本，但报告为应用程序/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， " 文本/逗号分隔值，应用程序/csv，应用程序/excel， 应用程序/盾。mssexcel，文本/任何文本，应用程序/vnd。ms excel, 应用程序/ 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"/> .

只写你想要接受的扩展，在动作atr中以逗号分隔

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