HTML 属性：accept

¥Overview

Accept 属性是 file <input> 类型的属性。它在 <form> 元素上得到支持，但因 file 元素而被删除。

¥The accept property is an attribute of the file <input> type. It was supported on the <form> element, but was removed in favor of file.

由于给定的文件类型可能以多种方式标识，因此当你需要特定类型的文件时，提供一组完整的类型说明符很有用，或者使用通配符来表示可接受的任何格式的类型。

¥Because a given file type may be identified in more than one manner, it's useful to provide a thorough set of type specifiers when you need files of specific type, or use the wild card to denote a type of any format is acceptable.

例如，可以通过多种方式识别 Microsoft Word 文件，因此接受 Word 文件的站点可能会使用如下所示的 <input>：

¥For instance, there are a number of ways Microsoft Word files can be identified, so a site that accepts Word files might use an <input> like this:

<input
  type="file"
  id="docpicker"
  accept=".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document" />

然而，如果你接受媒体文件，你可能希望包含该媒体类型的任何格式：

¥Whereas if you're accepting a media file, you may want to be include any format of that media type:

<input type="file" id="soundFile" accept="audio/*" />
<input type="file" id="videoFile" accept="video/*" />
<input type="file" id="imageFile" accept="image/*" />

accept 属性不验证所选文件的类型；它为浏览器提供提示，引导用户选择正确的文件类型。用户仍然可以（在大多数情况下）在文件选择器中切换一个选项，从而可以覆盖此选项并选择他们想要的任何文件，然后选择不正确的文件类型。

¥The accept attribute doesn't validate the types of the selected files; it provides hints for browsers to guide users towards selecting the correct file types. It is still possible (in most cases) for users to toggle an option in the file chooser that makes it possible to override this and select any file they wish, and then choose incorrect file types.

因此，你应该确保预期的要求在服务器端得到验证。

¥Because of this, you should make sure that expected requirement is validated server-side.

¥Examples

当设置文件输入类型时，打开的原生文件选择器应该仅允许选择正确文件类型的文件。大多数操作系统都会淡化不符合条件且不可选择的文件。

¥When set on a file input type, the native file picker that opens up should only enable selecting files of the correct file type. Most operating systems lighten the files that don't match the criteria and aren't selectable.

<p>
  <label for="soundFile">Select an audio file:</label>
  <input type="file" id="soundFile" accept="audio/*" />
</p>
<p>
  <label for="videoFile">Select a video file:</label>
  <input type="file" id="videoFile" accept="video/*" />
</p>
<p>
  <label for="imageFile">Select some images:</label>
  <input type="file" id="imageFile" accept="image/*" multiple />
</p>

请注意，最后一个示例允许你选择多个图片。有关详细信息，请参阅 multiple 属性。

¥Note the last example allows you to select multiple images. See the multiple attribute for more information.

¥Unique file type specifiers

唯一文件类型说明符是描述用户可以在类型 file 的 <input> 元素中选择的文件类型的字符串。每个唯一的文件类型说明符可以采用以下形式之一：

¥A unique file type specifier is a string that describes a type of file that may be selected by the user in an <input> element of type file. Each unique file type specifier may take one of the following forms:

• 有效的不区分大小写的文件扩展名，以句点 (".") 字符开头。例如：.jpg、.pdf 或 .doc。
• 有效的 MIME 类型字符串，不带扩展名。
• 字符串 audio/* 表示 "任何音频文件"。
• 字符串 video/* 表示 "任何视频文件"。
• 字符串 image/* 表示 "任何图片文件"。

accept 属性将包含一个或多个这些唯一文件类型说明符的字符串作为其值，并以逗号分隔。例如，需要可以以图片形式呈现的内容（包括标准图片格式和 PDF 文件）的文件选择器可能如下所示：

¥The accept attribute takes as its value a string containing one or more of these unique file type specifiers, separated by commas. For example, a file picker that needs content that can be presented as an image, including both standard image formats and PDF files, might look like this:

<input type="file" accept="image/*,.pdf" />

¥Using file inputs

¥A basic example

<form method="post" enctype="multipart/form-data">
  <div>
    <label for="file">Choose file to upload</label>
    <input type="file" id="file" name="file" multiple />
  </div>
  <div>
    <button>Submit</button>
  </div>
</form>

div {
  margin-bottom: 10px;
}

这会产生以下输出：

¥This produces the following output:

注意：你也可以在 GitHub 上找到此示例 - 请参阅 源代码 和 看到它实时运行。

¥Note: You can find this example on GitHub too — see the source code, and also see it running live.

无论用户的设备或操作系统如何，文件输入都会提供一个按钮，用于打开文件选择器对话框，允许用户选择文件。

¥Regardless of the user's device or operating system, the file input provides a button that opens up a file picker dialog that allows the user to choose a file.

包括 multiple 属性，如上所示，指定可以一次选择多个文件。用户可以按照其所选平台允许的任何方式从文件选择器中选择多个文件（例如，按住 Shift 或 Control，然后单击）。如果你只想让用户为每个 <input> 选择一个文件，请省略 multiple 属性。

¥Including the multiple attribute, as shown above, specifies that multiple files can be chosen at once. The user can choose multiple files from the file picker in any way that their chosen platform allows (e.g. by holding down Shift or Control, and then clicking). If you only want the user to choose a single file per <input>, omit the multiple attribute.

¥Limiting accepted file types

通常，你不希望用户能够选择任何任意类型的文件；相反，你通常希望他们选择特定类型的文件。例如，如果你的文件输入允许用户上传个人资料图片，你可能希望他们选择 Web 兼容的图片格式，例如 JPEG 或 PNG。

¥Often you won't want the user to be able to pick any arbitrary type of file; instead, you often want them to select files of a specific type or types. For example, if your file input lets users upload a profile picture, you probably want them to select web-compatible image formats, such as JPEG or PNG.

可以使用 accept 属性指定可接受的文件类型，该属性采用逗号分隔的允许文件扩展名或 MIME 类型列表。一些例子：

¥Acceptable file types can be specified with the accept attribute, which takes a comma-separated list of allowed file extensions or MIME types. Some examples:

• accept="image/png" 或 accept=".png" — 接受 PNG 文件。
• accept="image/png, image/jpeg" 或 accept=".png, .jpg, .jpeg" — 接受 PNG 或 JPEG 文件。
• accept="image/*" — 接受任何具有 image/* MIME 类型的文件。（许多移动设备还允许用户在使用相机时拍照。）
• accept=".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document" — 接受任何听起来像 MS Word 文档的内容。

让我们看一个更完整的例子：

¥Let's look at a more complete example:

<form method="post" enctype="multipart/form-data">
  <div>
    <label for="profile_pic">Choose file to upload</label>
    <input
      type="file"
      id="profile_pic"
      name="profile_pic"
      accept=".jpg, .jpeg, .png" />
  </div>
  <div>
    <button>Submit</button>
  </div>
</form>

div {
  margin-bottom: 10px;
}

¥See also

• 使用 Web 应用中的文件
• 文件接口