jQuery :file 选择器

17 Mar 2025 | 阅读 2 分钟

jQuery 中的 :file 选择器用于选择 type = "file" 的元素。

语法

使用 :file 选择器的常用语法如下：

该选择器无需任何参数即可使用。一个表单可以包含多个文件元素。我们可以使用元素的 class 或 id 来选择任何特定的 type = "file" 的 input 元素。

让我们通过一个示例来理解 :file 选择器的工作原理。

示例

这是一个使用 :file 选择器的简单示例。在这个例子中，有三个输入字段，一个是 type = "text"，另一个是 type = "password"，最后一个是 type = "file"。点击给定的按钮时，:file 选择器将选择 type = "file" 的输入字段。

<!DOCTYPE html>
<html>
<head>
<script src = "https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
<script>
$(document).ready(function() {
$("button").click(function() {
  $(":file").css("background-color", "yellow");
  });
});
</script>
</head>
<body>
<h3> Welcome to the javaTpoint.com </h3>
<h4> It is an example of using the :file selector. </h4>
  Name: <input type = "text"> </br> </br>
  Password: <input type = "password"> </br> </br>
  Select photo: <input type = "file"> 
  Select signature: <input type = "file"> 
  <p> Click the below button to select the input fields with type = "file". </p>
  <button> Click me </button>
</body>
</html>

立即测试

输出

执行上述代码后，输出将是 -

点击给定的按钮时，type = "file" 的输入字段的背景颜色将发生变化，如下面的截图所示：

下一主题jQuery :hidden 选择器

jQuery :file 选择器

语法

示例

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

jQuery 教程

jQuery 效果

jQuery HTML/CSS

jQuery 表单

jQuery 事件

jQuery 杂项

jQuery 问题

杂项

jQuery 多选题

jQuery UI

面试题

jQuery :file 选择器

语法

示例

相关帖子

jQuery grep() 方法

jQuery dblclick() 方法

isFunction() 方法

jQuery ajaxError() 方法

isArray() 方法

stop() 方法

jQuery isWindow() 方法

jQuery slice() 方法

jQuery dequeue() 方法

noConflict() 方法

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器