<input type="file">元素中的 “浏览” 按钮时，我想限制可以从本机 OS 文件选择器选择的文件类型。我有一种感觉，这是不可能的，但我想知道是否有一个解决方案。我只想保留 HTML 和 JavaScript；请不要使用 Flash。
严格来说，答案是否定的。开发人员无法阻止用户上传任何类型或扩展名的文件。
但是， <input type = "file"> 的 accept属性仍然可以帮助在 OS 的 “文件选择” 对话框中提供过滤器。例如，
<!-- (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 中均有效。
因此，为了支持 IE 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 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，一种方法是this ），并且绝对必须在服务器上验证文件类型，同时使用同时使用文件扩展名和其二进制签名（ ASP）的 MIME 类型。 .NET ， PHP ， Ruby ， Java ）。您可能还需要参考这些表以获取文件类型及其魔术数字，以执行更可靠的服务器端验证。
这里有3 个良好的读取上的文件上传和安全性。
编辑：也许使用二进制签名的文件类型验证也可以在客户端使用 HTML5 File API 在 JavaScript 上进行（而不仅仅是通过查看扩展名），但是仍然必须在服务器上对文件进行验证，因为恶意用户仍然可以通过发出自定义 HTTP 请求来上传文件。
输入标签具有 accept 属性。但是，它在任何方面都不可靠。浏览器最有可能将其视为 “建议”，这意味着用户也将根据文件管理器进行预选择，仅显示所需的类型。他们仍然可以选择 “所有文件” 并上传所需的任何文件。
例如：
<form>
<input type="file" name="pic" id="pic" accept="image/gif, image/jpeg" />
</form>请记住，它仅用作用户查找正确文件的 “帮助”。每个用户都可以将他 / 她想要的任何请求发送到您的服务器。您始终必须在服务器端验证所有内容。
因此，答案是：不，您不能限制，但是您可以设置预选择，但不能依靠它。
替代地或附加地，您可以通过使用 JavaScript 检查文件名（输入字段的值）来执行类似的操作，但这是无稽之谈，因为它不提供任何保护，也不会简化用户的选择。它只会潜在地诱使网站管理员认为他 / 她受到了保护，并打开了一个安全漏洞。对于具有备用文件扩展名（例如 jpeg 而不是 jpg），大写或根本没有文件扩展名（在 Linux 系统上很常见）的用户，这可能会很麻烦。
您可以使用change事件监视用户选择的内容，并在那时通知他们文件不可接受。它不限制显示的文件的实际列表，但是除了支持不佳的accept属性之外，它是客户端可以执行的最接近的操作。
var file = document.getElementById('someId');
file.onchange = function(e) {
var ext = this.value.match(/\.([^\.]+)$/)[1];
switch (ext) {
case 'jpg':
case 'bmp':
case 'png':
case 'tif':
alert('Allowed');
break;
default:
alert('Not allowed');
this.value = '';
}
};<input type="file" id="someId" />