In this tutorial we will see how to Display Message When File Is Selected Using JQuery. The jQuery change() Method is used to detect the selection of file and then message is displayed once file is selected.
Table of Contents
HTML Code
HTML Code is given below, This code contains HTML input element.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Display Message When File Is Selected Using JQuery</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<input type="file" id='file'>
</body>
</html>
jQuery change() Method
The jQuery change() Method is used to detect the change in the state of HTML element. It basically triggers the change event or it is used to execute a function whenever a change occurs.
The change() method is used with JQuery selector.
JQuery Code
JQuery Code is given below, In this code the jQuery change() Method is used with the id selector of HTML input element. The id (file) of input element is used as a selector.
This will attach the function execution with input element and function will be executed whenever the change in input file is occurred.
Take a look at the code given below.
<script>
$(document).ready(function(){
$("#file").change(function(){
alert("Your File is Selected!");
});
});
</script>
Demo
Video Tutorial
Watch video tutorial on how to Display Message When File Is Selected Using JQuery.