一尘不染

使用时限制文件格式 ?

html

当用户单击<inputtype="file">HTML元素中的“浏览”按钮时,我想限制可以从本机OS文件选择器选择的文件类型。我有一种感觉,这是不可能的,但我想知道是否有_是_ 一个解决方案。我只想保留HTML和JavaScript;请不要使用Flash。


阅读 432

收藏
2020-05-10

共1个答案

一尘不染

严格来说,答案是 否定的 。开发人员 无法 阻止用户上传任何类型或扩展名的文件。

但是,仍然可以使用的 accept 属性<input type ="file">在OS的文件选择对话框中提供过滤器。例如,

<!-- (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中有效。

因此,为了支持早于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(*)。]

您还可以在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类型和相应的扩展名。因此, 最好的 方法是:

<!-- 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请求来上传文件。

2020-05-10