使用 JavaScript 上传文件时的文件类型验证

专注于就业的社交媒体平台允许用户创建帐户，并要求上传必要的文档，以便招聘人员进行分析。为了从用户那里收集文档，这些网站会在其用户详细信息表单中提供“上传文件”或“选择文件”选项；并且它们只接受特定的文件类型，例如“.pdf”、“.jpg”、“.png”等。此过程称为文件验证，可以使用 JavaScript 完成。

在本文中，我们将设计一个使用 JavaScript 验证文件类型的选项。为此，方法如下：

  • 步骤 1 − 创建一个名为 validateFileType() 的函数。

  • 步骤 2 − 当文件输入字段值发生变化时，触发 validateFileType() 函数。

  • 步骤 3 − 使用 document.getElementById('fileInput').files[0] 从文件输入字段中检索选定的文件。

  • 步骤 4 − 定义一个名为 allowedTypes 的数组，其中包含允许的文件类型（例如，'image/jpeg'、'image/png'、'application/pdf'）。

  • 步骤 5 − 使用 includes() 方法检查选定文件的类型是否包含在 allowedTypes 数组中。

    如果在 allowedTypes 数组中找到文件类型，则在屏幕上显示文件名。

    如果未找到文件类型，请执行以下步骤。

  • 步骤 6 − 向用户显示一条警报消息，提示“无效的文件类型。请选择 JPEG、PNG 或 PDF 文件”。

  • 步骤 7 − 通过将 document.getElementById('fileInput').value 设置为空字符串来清除文件输入字段的名称。

示例

在以下示例中，我们尝试使用上述方法在上传时验证文件类型：

<!DOCTYPE html>
<html>
<head>
   <title>File Type Validation Example</title>
   <script>
      function validateFileType() {
         var selectedFile = document.getElementById('fileInput').files[0];
         var allowedTypes = ['image/jpeg', 'image/png', 'application/pdf'];

         if (!allowedTypes.includes(selectedFile.type)) {
            alert('Invalid file type. Please upload a JPEG, PNG, or PDF file.');
            document.getElementById('fileInput').value = '';
         }
      }
   </script>
</head>
<body>
   <h1>File Type Validation Example</h1>
   <input type="file" id="fileInput" onchange="validateFileType()">
</body>
</html>

执行上述程序后，尝试上传文件，如果文件为“.jpg”、“.png”或“.pdf”，则会在屏幕上显示文件名。否则，会显示一条警报，提示“无效的文件类型”。

更新时间： 2023年8月4日

6K+ 阅读量

开启你的 职业生涯

通过完成课程获得认证

开始学习
广告