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

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

您可以使用以下接受类型

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

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

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

现在你可以使用新的html5输入验证属性pattern=".+\.(xlsx|xls|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);
}

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

除了最上面的答案之外，例如，CSV文件在macOS下报告为文本/纯文本，但报告为应用程序/vnd。ms-excel。 所以我用这个:

<input type="file" accept="text/plain, .csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" />