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

您实际上可以使用javascript做到这一点，但请记住js是客户端，因此，如果您要避免（如您所说的那样限制或限制）某些类型的文件，您实际上会在“警告用户”他们可以上传的文件类型。做它在服务器端。

如果您想开始使用服务器端验证，请看一下这个基本教程。对于整个教程，请访问此页面。

祝好运！

我建议如下：

• 如果必须让用户默认选择任何图像文件，请使用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" />

• 您不能限制用户将文件文件管理器更改为所有文件，因此请始终在脚本和服务器中验证文件类型

如前面的答案中所述，我们不能限制用户仅选择给定文件格式的文件。但是使用html中的file属性上的accept标签确实很方便。

至于验证，我们必须在服务器端进行。我们也可以在js的客户端执行此操作，但这不是万无一失的解决方案。我们必须在服务器端进行验证。

对于这些需求，我确实更喜欢struts2 Java Web应用程序开发框架。借助其内置的文件上传功能，将文件上传到基于struts2的Web应用程序可谓小菜一碟。只需提及我们希望在应用程序中接受的文件格式，其余所有内容都由框架本身的核心负责。您可以在struts官方网站上进行检查。

将input标签与accept属性一起使用

<input type="file" name="my-image" id="image" accept="image/gif, image/jpeg, image/png" />

单击此处以获取最新的浏览器兼容性表

现场演示在这里

要仅选择图像文件，可以使用此 accept="image/*"

<input type="file" name="my-image" id="image" accept="image/*" />

现场演示在这里

仅会显示gif，jpg和png，Chrome 44版的屏幕截图

严格来说，答案是否定的。开发人员无法阻止用户在本机OS文件选择对话框中选择任何类型或扩展名的文件。

但是，仍然可以使用的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中对我不起作用。该功能在IE 10 +，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) behavior: The file type filter dropdown shows the file types mentioned here, but is not the default in the dropdown. The default filter is All files (*).]

You can also use asterisks in MIME-types. For example:

<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 authors to specify both MIME-types and corresponding extensions in the accept attribute. So, the best approach is:

<!-- 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 of the same: here.

Reference: List of MIME-types

IMPORTANT: Using the accept attribute only provides a way of filtering in the files of types that are of interest. Browsers still allow users to choose files of any type. Additional (client-side) checks should be done (using JavaScript, one way would be this), and definitely file types MUST be verified on the server, using a combination of MIME-type using both the file extension and its binary signature (ASP.NET, PHP, Ruby, Java). You might also want to refer to these tables for file types and their magic numbers, to perform a more robust server-side verification.

Here are three good reads on file-uploads and security.

EDIT: Maybe file type verification using its binary signature can also be done on client side using JavaScript (rather than just by looking at the extension) using HTML5 File API, but still, the file must be verified on the server, because a malicious user will still be able to upload files by making a custom HTTP request.

你是对的。使用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>

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

例如：

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

阅读HTML5规范中的更多内容

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

因此，答案是：不，您不能限制，但是您可以设置预选择，但不能依靠它。

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

从技术上讲，您可以在元素上指定accept属性（在html5中为替代属性）input，但未正确支持该属性。