If the browser uses this attribute, it is only as an help for the user, so he won't upload a multi-megabyte file just to see it rejected by the server... Same for the <input type="hidden" name="MAX_FILE_SIZE" value="100000"> tag: if the browser uses it, it won't send the file but an error resulting in UPLOAD_ERR_FORM_SIZE (2) error in PHP (not sure how it is handled in other languages). Note these are helps for the user. Of course, the server must always check the type and size of the file on its end: it is easy to tamper with these values on the client side.

accept属性非常有用。它提示浏览器只显示当前输入允许的文件。虽然它通常可以被用户覆盖，但默认情况下，它有助于为用户缩小搜索结果的范围，因此他们可以准确地得到他们要找的东西，而不必筛选100种不同的文件类型。

使用

注意:这些示例是基于当前规范编写的，实际上可能无法在所有(或任何)浏览器中运行。规范在将来也可能发生变化，这可能会破坏这些示例。

h1 { font-size: 1em; margin:1em 0; } h1 ~ h1 { border-top: 1px solid #ccc; padding-top: 1em; } <h1>Match all image files (image/*)</h1> <p><label>image/* <input type="file" accept="image/*"></label></p> <h1>Match all video files (video/*)</h1> <p><label>video/* <input type="file" accept="video/*"></label></p> <h1>Match all audio files (audio/*)</h1> <p><label>audio/* <input type="file" accept="audio/*"></label></p> <h1>Match all image files (image/*) and files with the extension ".someext"</h1> <p><label>.someext,image/* <input type="file" accept=".someext,image/*"></label></p> <h1>Match all image files (image/*) and video files (video/*)</h1> <p><label>image/*,video/* <input type="file" accept="image/*,video/*"></label></p>

来自HTML规范(来源)

The accept attribute may be specified to provide user agents with a hint of what file types will be accepted. If specified, the attribute must consist of a set of comma-separated tokens, each of which must be an ASCII case-insensitive match for one of the following: The string audio/* Indicates that sound files are accepted. The string video/* Indicates that video files are accepted. The string image/* Indicates that image files are accepted. A valid MIME type with no parameters Indicates that files of the specified type are accepted. A string whose first character is a U+002E FULL STOP character (.) Indicates that files with the specified file extension are accepted.

Chrome浏览器支持。它不应该用于验证，而是用于类型提示操作系统。如果在文件上传中有accept="image/jpeg"属性，操作系统只能显示建议类型的文件。

在2015年，我发现让它同时适用于Chrome和Firefox的唯一方法是把所有你想支持的扩展，包括变体(包括前面的点!):

accept=".jpeg, .jpg, .jpe, .jfif, .jif"

Firefox的问题:使用图像/jpeg mime类型的Firefox将只显示。jpg文件，非常奇怪，好像普通的。jpeg是不行的…

无论您做什么，一定要尝试使用具有许多不同扩展名的文件。 也许这甚至取决于操作系统…我认为accept是不区分大小写的，但可能不是在每个浏览器中。

下面是关于accept的MDN文档:

接受 如果type属性的值是file，则该属性将指示服务器接受的文件类型，否则为 会被忽略。必须为逗号分隔的唯一性列表 内容类型说明符: 以STOP字符(U+002E)开头的文件扩展名。(例如。jpg， .png， .doc)。 没有扩展的有效MIME类型。 Audio /*表示声音文件。HTML5 Video /*表示视频文件。HTML5 Image /*表示图像文件。HTML5

It's been a few years, and Chrome at least makes use of this attribute. This attribute is very useful from a usability standpoint as it will filter out the unnecessary files for the user, making their experience smoother. However, the user can still select "all files" from the type (or otherwise bypass the filter), thus you should always validate the file where it is actually used; If you're using it on the server, validate it there before using it. The user can always bypass any client-side scripting.

If the browser uses this attribute, it is only as an help for the user, so he won't upload a multi-megabyte file just to see it rejected by the server... Same for the <input type="hidden" name="MAX_FILE_SIZE" value="100000"> tag: if the browser uses it, it won't send the file but an error resulting in UPLOAD_ERR_FORM_SIZE (2) error in PHP (not sure how it is handled in other languages). Note these are helps for the user. Of course, the server must always check the type and size of the file on its end: it is easy to tamper with these values on the client side.