使用带有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版

您可以在文件选择框中使用“accept”属性作为过滤器。 使用“accept”可以帮助您根据“后缀”或“MIME类型”过滤输入文件

1.基于后缀的过滤: 这里的“accept”属性只允许选择扩展名为。jpeg的文件。

<input type="file" accept=".jpeg" />

2.基于“文件类型”的过滤器 这里的“accept”属性只允许你选择一个“image/jpeg”类型的文件。

<input type="file" accept="image/jpeg" />

重要提示:我们可以更改或删除文件的扩展名，而不改变模因类型。例如，可以有一个没有扩展名的文件，但该文件的类型可以是“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" />

是的，你说得对。这在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属性之外，它是最接近客户端的。

var file = document.getElementById('someId'); 文件。Onchange =函数(e) { Var ext = this.value.match(/\.([^\.]+)$/)[1]; Switch (ext) { 例“jpg”: 例“bmp”: 例“png”: 气管无名动脉瘘管的情况下“”: 警报(允许的); 打破; 默认值: 警报(“不允许”); 这一点。Value = "; ｝ }; <input type="file" id="someId" />

JSFiddle

严格地说，答案是否定的。开发人员不能阻止用户使用前端验证(HTML/JavaScript)上传任何类型或扩展名的文件。但是，<input type = "file">的accept属性可以帮助在用户的浏览器/操作系统提供的文件选择对话框中提供一个过滤器。例如,

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

应该提供一种过滤除.xls或.xlsx以外的文件的方法。虽然输入元素的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 = "文件" 接受盾= "应用程序/ vnd.openxmlformats-officedocument.spreadsheetml.sheet、应用程序/。ms excel " / >

[Edge (EdgeHTML)行为:文件类型过滤器下拉菜单显示了这里提到的文件类型，但不是默认的下拉菜单。默认过滤器为“所有文件(*)”。

您还可以在mime类型中使用星号。例如:

<input type="file" accept="image/*" /> <!——所有图像类型——> <input type="file" accept="audio/*" /> <!——所有音频类型——> <input type="file" accept="video/*" /> <!——所有视频类型——>

W3C建议作者在accept属性中指定mime类型及其相应的扩展。所以，最好的方法是:

<！正确的方法:同时使用文件扩展名和相应的mime类型。--> <！——(IE 10+， Edge (EdgeHTML)， Edge (Chromium)， Chrome, Firefox)——> < input type = "文件" 接受= " xls, .xlsx、应用程序/ vnd.openxmlformats-officedocument.spreadsheetml.sheet盾应用程序/。ms excel " / >

JSFiddle是一样的:这里。

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.

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

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

例如:

<form> <输入类型=“文件” 名称=“图片” id=“图片” 接受=“图像/gif， 图像/jpeg” /> </form>

在HTML5规范中阅读更多

请记住，它只是用于“帮助”用户找到正确的文件。 每个用户都可以向您的服务器发送任何请求。 您总是需要验证服务器端的所有内容。

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

Alternatively or additionally you can do something similar by checking the filename (value of the input field) with JavaScript, but this is nonsense because it provides no protection and also does not ease the selection for the user. It only potentially tricks a webmaster into thinking he/she is protected and opens a security hole. It can be a pain in the ass for users that have alternative file extensions (for example jpeg instead of jpg), uppercase, or no file extensions whatsoever (as is common on Linux systems).