jQuery :file selector

The :file selector in jQuery is used to select the elements with the type = "file".

Syntax

The commonly used syntax of using the :file selector is given as follows -

The selector is used without any argument. A form can contain more than one file element. We can select any specific input element with type = "file" using the class or id of an element.

Let's see an illustration to understand the working of the :file selector.

Example

It is a simple example of using the :file selector. In this example, there are three input fields one is of type = "text", the other one is of type = "password", and the last one is of type = "file". On clicking the given button, the :file selector will select the input field with the type = "file".

<!DOCTYPE html>
<html>
<head>
<script src = "https://ajax.googleapis.com/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>

Test it Now

Output

After the execution of the above code, the output will be -