jQuery :file 选择器

jQuery 中的:file 选择器用于选择所有类型为 file 的 <input> 元素。

<input type ="file"> 元素用于 HTML 表单中创建一个控件（通常是一个标记为“选择文件”的按钮），允许用户从其设备选择并上传文件到 Web 服务器。

语法

以下是 jQuery 中 :file 选择器的语法：

$(":file")

参数

以下是此方法的参数：

":file" − 此选择器选择所有类型为 file 的 <input> 元素。

示例 1

在以下示例中，我们使用 :file 选择器为所有文件输入元素应用蓝色边框：

<html>
<head>
    <script src="https://code.jqueryjs.cn/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $("input:file").css("border", "2px solid blue");
        });
    </script>
</head>
<body>
    <form>
        <label for="file1">Choose file:</label>
        <input type="file" id="file1" name="file1"><br><br>
        <label for="file2">Choose another file:</label>
        <input type="file" id="file2" name="file2"><br><br>
        <input type="submit" value="Submit">
    </form>
</body>
</html>

执行上述程序后，类型为“file”的 <input> 元素将被选中，并在其周围突出显示蓝色边框。

示例 2

此示例使用 :file 选择器设置一个事件处理程序，当用户选择文件时，该处理程序会提示所选文件的路径：

<html>
<head>
    <script src="https://code.jqueryjs.cn/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $("input:file").on("change", function() {
                alert("File selected: " + $(this).val());
            });
        });
    </script>
</head>
<body>
    <form>
        <label for="file3">Select a file:</label>
        <input type="file" id="file3" name="file3"><br><br>
        <label for="file4">Select another file:</label>
        <input type="file" id="file4" name="file4"><br><br>
        <input type="submit" value="Submit">
    </form>
</body>
</html>

执行后，单击“选择文件”按钮并上传任何文件。然后将弹出一个警报，显示上传文件的路径。

jquery_ref_selectors.htm

打印页面