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

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：文件输入的value属性包含一个字符串，该字符串表示所选文件(s)的路径。如果尚未选择任何文件，则值为一个空字符串("")。当用户选择多个文件时，value表示列表中的第一个文件。

  • Accept：accept属性值是一个字符串，指定文件输入应接受哪些文件类型。此字符串是由逗号分隔的唯一文件类型说明符列表。因为给定的文件类型可以通过多种方式识别，所以当您需要特定格式的文件时，提供一组全面的类型说明符很有用。

  • 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>

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

更新于：2023年9月11日

3K+ 浏览量

开启你的职业生涯

通过完成课程获得认证

开始学习
广告