当用户单击<inputtype="file">HTML元素中的“浏览”按钮时,我想限制可以从本机OS文件选择器选择的文件类型。我有一种感觉,这是不可能的,但我想知道是否有_是_ 一个解决方案。我只想保留HTML和JavaScript;请不要使用Flash。
<inputtype="file">
严格来说,答案是 否定的 。开发人员 无法 阻止用户上传任何类型或扩展名的文件。
但是,仍然可以使用的 accept 属性<input type ="file">在OS的文件选择对话框中提供过滤器。例如,
<input type ="file">
<!-- (IE 10+, Edge (EdgeHTML), Edge (Chromium), Chrome, Firefox 42+) --> <input type="file" accept=".xls,.xlsx" />
应该提供一种过滤掉.xls或.xlsx以外的文件的方法。尽管element的MDN页面input始终表示支持此功能,但令我惊讶的是,直到42版,此功能才在Firefox中对我不起作用。该功能在IE10 +,Edge和Chrome中有效。
input
因此,为了支持早于IE 42+的Firefox 42以及IE 10+,Edge,Chrome和Opera,我认为最好使用逗号分隔的MIME类型列表:
<!-- (IE 10+, Edge (EdgeHTML), Edge (Chromium), Chrome, Firefox) --> <input type="file" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel" />
[ Edge (EdgeHTML)行为:文件类型过滤器下拉列表显示此处提到的文件类型,但不是下拉列表中的默认类型。默认过滤器为All files(*)。]
All files(*)
您还可以在MIME类型中使用星号。例如:
<input type="file" accept="image/*" /> <!-- all image types --> <input type="file" accept="audio/*" /> <!-- all audio types --> <input type="file" accept="video/*" /> <!-- all video types -->
W3C 建议 作者在accept属性中同时指定MIME类型和相应的扩展名。因此, 最好的 方法是:
accept
<!-- Right approach: Use both file extensions and corresponding MIME-types. --> <!-- (IE 10+, Edge (EdgeHTML), Edge (Chromium), Chrome, Firefox) --> <input type="file" accept=".xls,.xlsx, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel" />
。
参考: MIME类型列表
重要: 使用accept属性仅提供一种在感兴趣的类型的文件中进行过滤的方法。浏览器仍然允许用户选择任何类型的文件。应该进行其他(客户端)检查(使用JavaScript,一种方法是this),并且绝对 必须在服务器上使用文件扩展名及其二进制签名(ASP)使用MIME类型的组合 来验证 文件类型.NET,PHP,Ruby,Java)。 表以获取文件类型及其魔幻数字,以执行更强大的服务器端验证。
编辑: 也许使用其二进制签名的文件类型验证也可以在客户端使用HTML5FileAPI在JavaScript上完成(而不仅仅是通过查看扩展名),但是仍然必须在服务器上验证文件,因为恶意用户仍然可以通过发出自定义HTTP请求来上传文件。