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

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

在我的桌面上有以下excel文件:

file1.xlsx file1.xls file.csv

我想上传的文件只显示.xlsx, .xls, & .csv文件。

使用accept属性,我发现这些内容类型负责.xlsx和.xls扩展…

接受应用程序/ vnd.openxmlformats-officedocument.spreadsheetml =。表(.XLSX) 接受=应用程序/盾。ms excel (xls)

但是,我找不到Excel CSV文件的正确内容类型!有什么建议吗?

例如:http://jsfiddle.net/LzLcZ/


当前回答

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

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

其他回答

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

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

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

<input type="file" ID="fileSelect" accept=".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;
}

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

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

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