In this article, you will learn how to check if an input file is empty or not using Jquery or javascript. There are various ways to check if an input file is empty or not.
Here are some examples to check if an input file is empty or not Using JQuery or Javascript.
In this example, we use the element.files.length property in javascript to check if a file is selected or not. If the element.files.length property returns 0, this means the file is not selected, otherwise the file is selected.
Here is an example to check if an input file is empty or not using javascript.
<!DOCTYPE html>
<html>
<head>
<title>
How to check if an input file is empty or not using JavaScript?
</title>
</head>
<body style="text-align: center;">
<h1><span style="color: purple;">Tutorials</span>Rack</h1>
<p style="font-size: 15px; font-weight: bold;">
Click on the button to see if any file is selected or Not!
</p>
<input type="file" name="File" id="file" />
<br />
<br />
<button onclick="IsInputFileEmpty()">
click here
</button>
<p id="message" style="color: green; font-size: 20px; font-weight: bold;"></p>
<script>
var msg = document.getElementById("message");
var file = document.getElementById("file");
function IsInputFileEmpty() {
if (file.files.length == 0) {
msg.innerHTML = "No files selected";
} else {
msg.innerHTML = "Some file is selected";
}
}
</script>
</body>
</html>In this example, we used the element.files.length property in Jquery to check if a file is selected or not. If the element.files.length property returns 0, this means the file is not selected, otherwise the file is selected.
Here is an example to check if an input file is empty or not using Jquery.
<!DOCTYPE html>
<html>
<head>
<title>
How to check if an input file is empty or not using Jquery?
</title>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</head>
<body style="text-align: center;">
<h1><span style="color: purple;">Tutorials</span>Rack</h1>
<p style="font-size: 15px; font-weight: bold;">
Click on the button to see if any file is selected or Not!
</p>
<input type="file" name="File" id="file" />
<br />
<br />
<button onclick="IsInputFileEmpty()">
click here
</button>
<p id="message" style="color: green; font-size: 20px; font-weight: bold;"></p>
<script>
var msg = $("#message");
function IsInputFileEmpty() {
if ($("#file")[0].files.length === 0) {
msg.text("No files selected");
} else {
msg.text("Some file is selected");
}
}
</script>
</body>
</html>In this example, we used the element.val() method to check if an input file is empty or not. If the element.val() equals empty('') string, this means the file is not selected, otherwise the file is selected.
Here is an example to check if an input file is empty or not using JQuery.
<!DOCTYPE html>
<html>
<head>
<title>
How to check if an input file is empty or not using Jquery?
</title>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</head>
<body style="text-align: center;">
<h1><span style="color: purple;">Tutorials</span>Rack</h1>
<p style="font-size: 15px; font-weight: bold;">
Click on the button to see if any file is selected or Not!
</p>
<input type="file" name="File" id="file" />
<br />
<br />
<button onclick="IsInputFileEmpty()">
click here
</button>
<p id="message" style="color: green; font-size: 20px; font-weight: bold;"></p>
<script>
var msg = $("#message");
function IsInputFileEmpty() {
if ($("#file").val() === '') {
msg.text("No files selected");
} else {
msg.text("Some file is selected");
}
}
</script>
</body>
</html>I hope this article will help you to understand how to check if an input file is empty or not using Jquery or javascript.
Share your valuable feedback, please post your comment at the bottom of this article. Thank you!
Comments