使用 <input type="file"> 时限制文件格式？

Question

当用户单击 HTML 中 <input type="file"> 元素中的浏览按钮时，我想限制可以从本机操作系统文件选择器中选择的文件类型。我有一种感觉这是不可能的，但我想知道 是否 有解决方案。我只想保留 HTML 和 JavaScript；请不要使用 Flash。

原文由 Bojangles 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

但是， <input type = "file"> 的 接受 属性可以帮助在用户浏览器/操作系统提供的文件选择对话框中提供过滤器。例如，

 <!-- (IE 10+, Edge (EdgeHTML), Edge (Chromium), Chrome, Firefox 42+) -->
<input type="file" accept=".xls,.xlsx" />

应该提供一种方法来过滤掉 .xls 或 .xlsx 以外的文件。尽管 input 元素的 MDN 页面总是说它支持这个，但令我惊讶的是，直到版本 42，这在 Firefox 中对我不起作用。这在 IE 10+、Edge 和 Chrome 中有效。

因此，为了支持 42 岁以上的 Firefox 以及 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 their 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" />

相同的 JSFiddle： 这里。

参考： MIME 类型列表

重要提示： 使用 accept 属性仅提供一种过滤感兴趣类型文件的方法。浏览器仍然允许用户选择任何类型的文件。应该进行额外的（客户端）检查（使用 JavaScript，一种方法是 这样），并且绝对 必须在服务器上验证 文件类型，使用 MIME 类型的组合，同时使用文件扩展名及其二进制签名（ ASP .NET 、 PHP 、 红宝石、 Java ）。您可能还想参考 这些 文件类型及其 幻数 表，以执行更强大的服务器端验证。

这是有关文件上传和安全性的 三 本 好 读物。

编辑： 也许也可以使用 HTML5 文件 API 在客户端使用 JavaScript（而不是仅仅通过查看扩展）在客户端完成使用其二进制签名的文件类型验证，但是仍然必须在服务器上验证文件，因为恶意用户仍然可以通过发出自定义 HTTP 请求来上传文件。

原文由 Sachin Joseph 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

输入标签有 accept 属性。但是，它在任何方面都不可靠。浏览器很可能将其视为“建议”，这意味着用户也将根据文件管理器进行预选，仅显示所需的类型。他们仍然可以选择“所有文件”并上传他们想要的任何文件。

例如：

 <form>
    <input type="file" name="pic" id="pic" accept="image/gif, image/jpeg" />
</form>

在 HTML5 规范 中阅读更多内容

请记住，它仅用作用户查找正确文件的“帮助”。每个用户都可以向您的服务器发送他/她想要的任何请求。您始终必须在服务器端验证所有内容。

所以答案是： 不，你 _不能限制_，但你 可以 设置预选但你 不能 依赖它。

或者或另外，您可以通过使用 JavaScript 检查文件名（输入字段的值）来做类似的事情，但这是无稽之谈，因为它没有提供任何保护，也不会简化用户的选择。它只会潜在地诱使网站管理员认为他/她受到保护并打开安全漏洞。对于具有替代文件扩展名（例如 jpeg 而不是 jpg）、大写或没有任何文件扩展名（这在 Linux 系统上很常见）的用户来说，这可能是一件很痛苦的事情。

原文由 The Surrican 发布，翻译遵循 CC BY-SA 4.0 许可协议