根据this answer on Stack Overflow,我们可以设置<input type="file" />
的accept
属性来过滤接受的输入,如下所示:
accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
然而,正如你可以注意到运行下面的简单代码片段,Chrome43.0对来说,一些似乎完全忽略了的这种配置,而它完全被Firefox39.0理解。
我考虑换成更直截了当的方法,使用:
accept=".xls, .xlsx"
..。这在Chrome上运行良好,但让火狐有点困惑,只接受使用.xlsx
扩展名的文件。
考虑到这可能是非常常见和基本的,我肯定遗漏了一些东西:我在哪里搞砸了?如何让html5文件输入在浏览器之间一致地仅建议和文件?
这里有一段代码片段说明了我的问题(还有一个JSFiddle link,以防你想摆弄它)。
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"/>
发布于 2015-12-03 18:42:16
将它们同时传输mime类型和扩展名
<input type="file" name="file2" accept="text/csv, .csv"/>
发布于 2015-12-04 02:05:08
免责声明: This is 无论如何都不是一个答案,而仅仅是给其他试图以错误方式使用此属性的潜在读者的一个说明。
在accept
属性的this non-official W3C reference上,您可以找到以下内容:
提示:不要将此属性用作验证工具。文件上传应在服务器上进行验证。
不建议使用此属性进行验证,因为用户可以以某种方式解决它,并且并不是所有浏览器的行为都相同。
发布于 2015-11-30 19:55:41
第一:你确实有一个html5文档类型吗?
<!DOCTYPE html>
因为如果你没有,它可能在某些地方不起作用。
第二:你可以使用javascript或jquery来代替html。查看此问题/答案:jquery - Check for file extension before uploading
第三:根据我的经验,有些html5的东西有时候是不起作用的。例如,我不知道为什么,但是有必要通过使用jquery来解决问题。
无论如何,您应该始终执行服务器端验证,以确保用户正在上传的内容实际上是您所限制的内容。
https://stackoverflow.com/questions/33882790
复制相似问题