首页 > web前端 > js教程 > 正文

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

PHPz
发布: 2023-09-20 17:25:03
转载
1419 人浏览过

使用 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”,屏幕上会显示文件名。否则,它将显示一条警告,指出“文件类型无效”。

以上是使用 JavaScript 上传时进行文件类型验证的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:tutorialspoint.com
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!