我想限制当用户单击 HTML 中 <input type="file"> 元素中的“浏览”按钮时可以从本机操作系统文件选择器中选择的文件类型。我觉得这是不可能的，但我想知道是否有 解决方案。我想只保留 HTML 和 JavaScript；请不要使用 Flash。
【问题讨论】：
您可以使用“接受”属性作为文件选择框中的过滤器。 使用“接受”可帮助您根据输入文件的“后缀”或“MIME 类型”过滤输入文件
1.根据后缀过滤： 这里的“accept”属性只允许选择扩展名为 .jpeg 的文件。
<input type="file" accept=".jpeg" />
2.根据“文件类型”过滤 这里的“accept”属性只允许你选择一个“image/jpeg”类型的文件。
<input type="file" accept="image/jpeg" />
重要提示：我们可以更改或删除文件的扩展名，而无需更改 meme 类型。例如，可以有一个没有扩展名的文件，但这个文件的类型可以是“image/jpeg”。所以这个文件不能通过 accept=".jpeg" 过滤器。但它可以通过accept="image/jpeg"。
3.我们可以使用*来选择各种文件类型。例如下面的代码允许选择各种图像。例如 "image/png" 或 "image/jpeg" 或 ... 。所有这些都是允许的。
<input type="file" accept="image/*" />
4.我们可以在 select 属性中使用 cama ( , ) 作为“或运算符”。例如，要允许所有类型的图像或 pdf 文件，我们可以使用以下代码：
<input type="file" accept="image/* , application/pdf" />
【讨论】：
严格来说，答案是否。开发人员不能阻止用户上传任何类型或扩展名的文件。
但是，<input type = "file"> 的 accept 属性仍然可以帮助在操作系统的文件选择对话框中提供过滤器。例如，
<!-- (IE 10+, Edge (EdgeHTML), Edge (Chromium), Chrome, Firefox 42+) -->
<input type="file" accept=".xls,.xlsx" />应该提供一种过滤除 .xls 或 .xlsx 以外的文件的方法。尽管 input 元素的 MDN 页面总是说它支持这一点，但令我惊讶的是，这在 Firefox 42 之前对我不起作用。这适用于 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 recommends 作者在 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：here。
参考： List of MIME-types
重要提示： 使用 accept 属性仅提供一种过滤类型为兴趣。浏览器仍然允许用户选择任何类型的文件。应该进行额外的（客户端）检查（使用 JavaScript，一种方法是 this），并且绝对文件类型必须在服务器上验证，使用使用文件扩展名及其二进制签名（ASP.NET、PHP、Ruby、Java）的 MIME 类型的组合。您可能还想参考thesetables 了解文件类型及其magic numbers，以执行更强大的服务器端验证。
以下是关于文件上传和安全性的threegoodreads。
编辑：也许使用其二进制签名的文件类型验证也可以在客户端使用 JavaScript（而不仅仅是通过查看扩展名）使用 HTML5 File API 完成，但文件必须在服务器上进行验证，因为恶意用户仍然可以通过发出自定义 HTTP 请求来上传文件。
【讨论】：
accept 在 Edge 中仍然不起作用：stackoverflow.com/questions/31875617/…。更多细节在这里：wpdev.uservoice.com/forums/257854-microsoft-edge-developer/…
exclude="exe"。 ¯_(ツ)_/¯
在之前使用 accept 属性的答案的基础上，您可以使用 File API 完成此操作。如果您使用FileReader 进行一些本地解析或数据处理，这也可以让您访问文件内容。
首先创建一个输入元素，在这里您可以将文件类型应用于接受属性，但对于示例，它将允许您选择所有文件类型。
<input type="file" name="upload" accept="*" multiple>
接下来我们需要监听输入元素上的'change'事件。
var upload = document.querySelector('input[type="file"]');
upload.addEventListener('change', function() {});
在函数内部，您将能够访问输入的文件对象。
var files = this.files
我们不能只遍历对象，因为它不是一个数组，但是我们可以使用 item() 函数从列表中访问我们的 File 对象。
for (var i = 0; i < files.length; i++) {
var file = files.item(i);
}
现在我们有了 File 对象，我们可以访问它的名称和类型属性并在此处进行文件检查。在这种情况下，我正在检查它是否是 .txt 文件，如果不是，则打印一条消息。您可以根据文件类型的正则表达式模式检查名称或根据其 MIME 类型检查类型。
if (!file.name.match(/.txt$/i) || file.type != 'text/plain') {
console.log(file.name + ' is not a .txt file.');
}
var upload = document.querySelector('input[type="file"]');
upload.addEventListener('change', function() {
var files = this.files;
for (var i = 0; i < files.length; i++) {
var file = files.item(i);
if (!file.name.match(/.txt$/i) || file.type != 'text/plain') {
console.log(file.name + ' is not a .txt file.');
}
}
});<input type="file" name="upload" accept="*" multiple>现代浏览器很好地支持文件 API。通过将此与接受属性相结合，您可以轻松过滤本地用户可以在上传中选择的内容并提供有用的反馈。如果您要上传文件，您仍应在后端检查并验证文件类型。
【讨论】：
我建议如下：
如果你必须让用户默认选择任何图像文件，使用accept="image/*"
<input type="file" accept="image/*" />
如果您想限制特定的图像类型，请使用 accept="image/bmp, image/jpeg, image/png"
<input type="file" accept="image/bmp, image/jpeg, image/png" />
如果您想限制为特定类型，请使用 accept=".bmp, .doc, .pdf"
<input type="file" accept=".bmp, .doc, .pdf" />
您不能限制用户将文件管理器更改为所有文件，因此请始终在脚本和服务器中验证文件类型
【讨论】：
输入标签有accept属性。但是，它在任何方面都不可靠。 浏览器很可能将其视为“建议”，这意味着用户也将根据文件管理器进行预选，仅显示所需的类型。他们仍然可以选择“所有文件”并上传他们想要的任何文件。
例如：
<form>
<input type="file" name="pic" id="pic" accept="image/gif, image/jpeg" />
</form>在HTML5 spec了解更多信息
请记住，它仅用作用户查找正确文件的“帮助”。 每个用户都可以向您的服务器发送他/她想要的任何请求。 您始终必须在服务器端验证所有内容。
所以答案是：不你不能限制，但你可以设置一个预选但你不能 em> 依赖它。
另外或另外，您可以通过使用 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" />【讨论】：
如前面的答案所述，我们不能限制用户仅选择给定文件格式的文件。但是在 html 的文件属性上使用 accept 标记真的很方便。
至于验证，我们必须在服务器端进行。我们也可以在客户端用 js 做，但这不是一个万无一失的解决方案。我们必须在服务器端进行验证。
对于这些需求我真的更喜欢struts2 Java web 应用程序开发框架。凭借其内置的文件上传功能，将文件上传到基于 struts2 的 Web 应用程序是小菜一碟。只需提及我们希望在我们的应用程序中接受的文件格式，其余的都由框架本身的核心处理。可以在struts官网查看。
【讨论】：
使用带有accept 属性的input 标记
<input type="file" name="my-image" id="image" accept="image/gif, image/jpeg, image/png" />
点击here for the latest browser compatibility table
现场演示here
要只选择图片文件，可以使用accept="image/*"
<input type="file" name="my-image" id="image" accept="image/*" />
现场演示here
【讨论】：
accept="image/*"，它会在文件选择器中显示“图像文件”而不是“自定义文件”，这对最终用户来说很好。
我知道这有点晚了。
function Validatebodypanelbumper(theForm)
{
var regexp;
var extension = theForm.FileUpload.value.substr(theForm.FileUpload1.value.lastIndexOf('.'));
if ((extension.toLowerCase() != ".gif") &&
(extension.toLowerCase() != ".jpg") &&
(extension != ""))
{
alert("The \"FileUpload\" field contains an unapproved filename.");
theForm.FileUpload1.focus();
return false;
}
return true;
}
【讨论】：
从技术上讲，您可以在 input 元素上指定 accept attribute（html5 中的替代），但它没有得到适当的支持。
【讨论】：
您实际上可以使用 javascript 来执行此操作，但请记住 js 是客户端，因此如果您想避免（如您所说的限制或限制）某些类型的文件，您实际上会“警告用户”他们可以上传什么类型的文件您必须在服务器端执行文件。
如果您想开始使用服务器端验证，请查看this basic tut。整个教程请访问this page。
祝你好运！
【讨论】：
是的，你是对的。 HTML 是不可能的。用户将能够选择他/她想要的任何文件。
您可以编写一段 JavaScript 代码来避免根据其扩展名提交文件。但请记住，这绝不会阻止恶意用户提交他/她真正想要的任何文件。
类似：
function beforeSubmit()
{
var fname = document.getElementById("ifile").value;
// check if fname has the desired extension
if (fname hasDesiredExtension) {
return true;
} else {
return false;
}
}
HTML 代码：
<form method="post" onsubmit="return beforeSubmit();">
<input type="file" id="ifile" name="ifile"/>
</form>
【讨论】：