如何获取html5文件输入以仅跨浏览器一致地接受某些文件类型？

Question

根据Stack Overflow上的这个答案,我们可以设置a的accept属性<input type="file" />来过滤接受的输入,如下所示:

accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"

但是,正如您可以注意到运行下面的简单代码段,Chrome 43.0.something似乎只是忽略了这种配置,而Firefox 39.0则完全理解了这一点.

我考虑使用以下方法切换到更直接的方法:

accept=".xls, .xlsx"

...在Chrome中工作正常,但使Firefox有点混乱,只接受使用.xlsx扩展名的文件.

---

考虑到这可能是非常普遍和基本的,我必须遗漏一些东西:我在哪里搞砸了？如何获取html5文件输入以仅在浏览器中建议.xls和.xlsx文件一致？

这是一个代码片段,说明了我的问题(以及一个JSFiddle链接,以防你想要它).

Accepts application/vnd.ms-excel and the likes:<br />
<label for="file1">File input</label>
<input type="file" name="file1" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"/>
<hr />
Accepts .xls and .xlsx:<br />
<label for="file2">File input</label>
<input type="file" name="file2" accept=".xls, .xlsx"/>

Answer 1

将它们转移到mime类型和扩展名

<input type="file" name="file2" accept="text/csv, .csv"/>