jQuery :file selector

by Online Tutorials Library July 14, 2022

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  tutoraspire.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 –

jQuery :file selector

On clicking the given button, the background-color of the input field with type = “file” will be changed, as shown in the below screenshot –

jQuery :file selector

Next TopicjQuery :hidden selector

jQuery :file selector

jQuery :file selector

Syntax

Example

Allow only 10 numbers in textbox using Jquery

jQuery :hidden selector

You may also like