如何允许文件输入类型仅接受图像文件

htmlweb developmentfront end technology更新于 2025/3/26 16:44:17

HTML 中的 <input> 标签用于创建一个接受用户输入的输入控件。根据属性的类型，输入字段可能具有不同的形式。它是一个仅包含属性的空白元素。<input> 标签通常位于 <form> 标签内，只需设置适当的 type 属性即可用于表示文本字段、复选框、下拉菜单、按钮和其他输入。

它还具有许多其他属性，例如值、占位符、名称、接受、大小、高度、宽度等。

<input> 标签的行为因其 type 属性的值而有很大差异。type 属性指定要显示的 <input> 元素的类型。它不是必需属性，因此，如果未指定此属性，则默认类型为文本。

语法

<input type="value">

type 属性的一些值包括文件、图像、电子邮件、号码、密码、提交、按钮等。

输入类型:文件

file 输入类型指定文件选择控件。此元素由按钮和标签渲染，但外观因浏览器而异。按钮启动文件选择对话框，标签显示所选文件名。

我们还可以为文件选择字段添加"multiple"属性，以允许选择多个文件。语法如下所示。

<input type="file">

文件输入类型的属性

值:文件输入的 value 属性包含一个字符串，表示所选文件的路径。如果尚未选择任何文件，则该值为空字符串 ("")。当用户选择多个文件时，该值表示列表中的第一个文件。
接受:接受属性值是一个字符串，用于指定文件输入应接受哪些文件类型。此字符串是由逗号分隔的唯一文件类型说明符列表。由于给定文件类型可以通过多种方式识别，因此在需要特定格式的文件时，提供一套全面的类型说明符非常有用。
Capture: Capture 属性值是一个字符串，用于指定将使用哪个摄像头进行图像捕获。值为 user 表示应使用用户端的摄像头。值为 environment 则指定使用外置摄像头。
Multiple: 当指定 multiple 布尔属性时，文件输入允许用户选择多个文件。

当我们使用 <input type="file"> 时，它接受所有文件类型。但是，可以将文件类型限制为仅限图像或特定的图像文件扩展名。这可以通过以下方式实现:

使用"accept"属性

众所周知，'accept'属性指定了一个过滤器，用于过滤用户可以从文件输入对话框中选择的文件类型。有几种方法可以使用此属性将文件类型限制为仅限图像文件。

示例(将文件输入类型限制为图像)

以下示例演示了如何使用"accept"属性在不指定任何扩展名的情况下仅接受图像文件。

<!DOCTYPE html>
<html>
  <head>
    <title>How to Allow the File Input Type to Accept Only Image Files</title>
  </head>
  <body>
    <input type="file" id="example1" name="example1" accept="image/*">
  </body>
</html>

示例(将文件输入类型限制为图像扩展名)

以下示例演示了如何使用"accept"属性仅接受具有指定扩展名的图像文件。

<!DOCTYPE html>
<html>
  <head>
    <title>How to Allow the File Input Type to Accept Only Image Files</title>
  </head>
  <body>
    <input type="file" id="example2" name="example2" accept="image/x-png,image/gif,image/jpeg">
  </body>
</html>
Or
<!DOCTYPE html>
<html>
  <head>
    <title>How to Allow the File Input Type to Accept Only Image Files</title>
  </head>
  <body>
    <input type="file" id="example2" name="example2" accept=".png, .jpg, .jpeg" />
  </body>
</html>

使用 JavaScript 验证

此示例利用输入标签的 accept 属性以及服务器端验证来验证内容是否确实是预期的文件类型。

示例

<!DOCTYPE html>
<html>
  <head>
    <title>How to Allow the File Input Type to Accept Only Image Files</title>
  </head>
  <body>
    <body>
      <input type="file" id="fileName" name="example3" accept=".jpg,.jpeg,.png,.gif" onchange="validateFileType()" />
      <script type="text/javascript">
        function validateFileType() {
          var fileName = document.getElementById("fileName").value;
          var idxDot = fileName.lastIndexOf(".") + 1;
          var extFile = fileName.substr(idxDot, fileName.length).toLowerCase();
          if (extFile == "jpg" || extFile == "jpeg" || extFile == "png" || extFile == "gif") {
            //TO DO
          } else {
            alert("Only jpg, jpeg, png and gif files are allowed!");
          }
        }
      </script>
    </body>
</html>

如果选定的文件不属于指定的图像扩展名，则屏幕上会弹出窗口通知用户有效的扩展名。