HTML 属性：accept

accept 属性是 file <input> 类型的属性。它在 <form> 元素上受支持，但已删除，取而代之的是 file。

由于给定的文件类型可以使用多种方式标识，因此在需要特定类型文件时提供全面的类型说明符集非常有用，或者使用通配符来表示任何格式的类型都可接受。

例如，Microsoft Word 文件可以使用多种方法标识，因此接受 Word 文件的网站可能会使用类似于此的 <input>

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

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

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

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

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

当在文件输入类型上设置时，打开的本机文件选择器应该只启用选择正确文件类型的文件。大多数操作系统会淡化不符合条件且不可选的文件。

<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 属性。

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

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

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

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

<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;
}

这将产生以下输出

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

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

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

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

• 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 文档的文件。

让我们看一个更完整的示例

<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;
}

• 从 Web 应用程序中使用文件
• 文件 API