HTML - accept 属性



HTML accept 属性用于定义服务器将接受的文件类型(通过文件上传提交)。

它接受以逗号分隔的一个或多个文件类型或唯一文件类型说明符(例如 image、audio、video、document 等)作为值。不要使用此属性来验证表单,因为文件上传应在服务器端进行验证。

HTML accept 属性只能与<input type="file"> 标签一起使用,HTML5 中不支持。

语法

<input type = "file" accept = "value" />

应用于

以下列出的元素允许使用 HTML accept 属性。

元素 描述
<input> HTML <input> 标签用于指定输入字段。

HTML accept 属性示例

您可以在表单中的输入字段中使用以下 accept 属性示例,以演示用户如何根据指定的类型上传文件。

指定服务器接受的文件

Accept 属性可用于指定用户可以选择的文件扩展名,例如 .jpg、.png、.pdf。

<!DOCTYPE html>
<html lang="en">

<head>
   <title>
      Specifying Files that Server Accept
   </title>
</head>

<body>
   <h2>
      Accepting only image files with 
      specific extensions
   </h2>
   <form>
      <label for="images">
         Select an image file (.jpg, .jpeg, .png, .gif):
      </label>
      <input type="file"
            id="images"
            name="images"
            accept=".jpg, .jpeg, .png, .gif">
      <br><br>
      <input type="submit" value="Submit">
   </form>
</body>

</html>

仅接受音频/视频文件

Accept 属性可用于指定用户可以选择音频、视频或图像(所有扩展名)。

<!DOCTYPE html>
<html>

<head>
   <title>Accepting audio/video file only</title>
</head>

<body>
   <h1>Accepting audio/video file only</h1>
   <form>
      <!-- Accepting all audio files -->
      <label for="audio">
         Select an audio file:
      </label>
      <input type="file"
            id="audio"
            name="audio"
            accept="audio/*">
      <br><br>

      <!-- Accepting all video files -->
      <label for="video">
         Select a video file:
      </label>
      <input type="file"
            id="video"
            name="video"
            accept="video/*">
      <br><br>
      <input type="submit" value="Submit">
   </form>
</body>

</html>

仅接受图像文件

Accept 属性可用于选择任何扩展名的图像。

<!DOCTYPE html>
<html>

<head>
      <title>
         Accept Attribute to select all image types
      </title>
</head>

<body>
   <h1>
      Accept Attribute to select all image types
   </h1>
   <form>
      <!-- Accepting all image files -->
      <label for="image">
         Select an image file:
      </label>
      <input type="file"
            id="image"
            name="image"
            accept="image/*">
      <br><br>
      <input type="submit" value="Submit">
   </form>
</body>

</html>

支持的浏览器

属性 Chrome Edge Firefox Safari Opera
accept 8.0 10.0 4.0 6.0 15.0
html_attributes_reference.htm
广告