HTML 如何使文件输入类型仅接受图像文件

在HTML中， < input>标签创建一个接受用户输入的输入控件。根据属性的类型，输入字段可能具有不同的形式。它是一个只有属性的空元素。<input>标签通常在<form>标签内部找到，并且可通过简单设置适当的type属性来表示文本字段、复选框、下拉框、按钮和其他输入项。

它还有许多其他属性，如value、placeholder、name、accept、size、height、width等。

<input>标签的行为在很大程度上取决于其type属性的值。type属性指定要显示的<input>元素的类型。它不是一个必需的属性，因此如果没有指定此属性，则默认类型是文本。

语法

<input type=”value”>

一些 type 属性的值包括 file、image、email、number、password、submit、button 等。

输入类型：文件

file 输入类型指定文件选择控件。该元素呈现为按钮和标签，但外观因浏览器而异。按钮启动一个文件选择对话框，标签显示所选文件的文件名（s）。

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

<input type="file">

文件输入类型的属性

Value： 文件输入的值属性包含一个字符串，表示选定文件的路径。如果尚未选择文件，则值为空字符串（””）。当用户选择多个文件时，值表示列表中的第一个文件。
Accept ： 接受属性的值是一个字符串，指定文件输入应接受的文件类型。该字符串是用逗号分隔的唯一文件类型说明符的列表。由于给定的文件类型可以用多种方式识别，因此在需要特定格式的文件时，提供全面的类型说明符是有用的。
Capture： 捕获属性的值是一个字符串，指定用于图像捕捉的摄像头。用户的值表示应使用用户侧的摄像头。环境的值指定使用外向摄像头。
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验证

这个例子利用input标签的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>

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