JavaScript 如何以编程方式触发文件输入元素的点击事件

在本文中，我们将学习如何以编程方式触发输入文件元素的点击事件。

方法： 每当您想以编程方式执行点击事件时，在特定条件下，只需使用DOM对象中的JavaScript内置 click() 函数。例如：

document.getElementById('your_input_type_file_element_id').click();

示例 1: 我们想要自动（编程方式）点击输入文件元素。当用户点击不是输入类型文件元素的“文件上传”按钮的其他按钮时，可以使用以下代码实现。

<!DOCTYPE html>
<html>
<script type="text/javascript">
    function open_file() {
        document.getElementById('input_file').click();
    }
</script>
 
<body>
    <input type="file" name="" id='input_file' hidden>
    <button onclick="open_file()">
        click event fire programmatically for input
        type file element
    </button>
</body>
</html>

输出： 输入文件类型为 隐藏的 ，所以每次运行这段代码时，您都可以轻松获取用于文件选择的选择对话框。在点击上面的按钮后，我们会得到如下图像下方的文件选择对话框。
JavaScript 如何以编程方式触发文件输入元素的点击事件

示例2： 例如，当用户注册您的服务时，他们使用 电子邮件、用户名、 密码， 等进行注册。每当用户成功注册时，您会通过电子邮件或短信给他们一个秘密密钥。用户在特定页面的输入框中输入此密钥后，他们就能够选择所需的文档/图片等。

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript">
        function open_file() {
            let secret_key = document.getElementById("secret_key").value;
            if (secret_key == "Geeksforgeeks") {
 
                // 'Geeksforgeeks' this value is just an example for 
                // your understanding.
                document.getElementById("input_file").click();
            }
        }
    </script>
</head>
 
<body>
    <p>Write down 'Geeksforgeeks'</p>
    <label>Enter Secret Key :</label>
    <input type="text" name="username"
           id="secret_key"
           oninput="open_file()" />
    <input type="file" name="" id="input_file" hidden />
</body>
</html>

输出: 在将正确的密钥输入到输入框后，文件选择对话框将弹出。通过 AJAX 请求生成，并通过后端文件将用户密钥与原始密钥进行匹配。
JavaScript 如何以编程方式触发文件输入元素的点击事件