How to Check Mentioned File Exists or not using JavaScript/jQuery?
Last Updated :
07 Apr, 2025
Sometimes we want to upload a file through the path of the file, but a few times the file does not exist. In that case, we have to respond to users the given path does not find any file or does not exist in the mentioned file.
Below are the approaches to check if mentioned file exists or not using JavaScript/jQuery:
Using Ajax() method
Ajax method () of jQuery to check if a file exists on a given URL or not. The Ajax () method is used to trigger the asynchronous HTTP request. If the file exists, the ajax() method will in turn call the ajaxSuccess() method or else it will call the error function
Example: To demonstrate checking whether the mentioned file exists or not using the Ajax() method.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
How to check if file exist using jquery
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<style>
body {
text-align: center;
}
h1 {
color: green;
}
#output {
color: green;
font-size: 20px;
font-weight: bold;
}
</style>
</head>
<body>
<h1>
GeeksforGeeks
</h1>
<label id="File_Path">
<b>Enter File Path:</b>
</label>
<input type="text" id="File_URL">
<button id="Check_File">
click here
</button>
<p id="output"></p>
<script>
$(document).ready(function () {
$("#Check_File").click(function () {
var url = $("#File_URL").val();
if (url != "") {
$.ajax({
url: url,
type: 'HEAD',
error: function () {
$("#output").text("File doesn't exists");
},
success: function () {
$("#output").text('File exists');
}
});
} else {
$("#Output").text("Please enter File URL");
}
});
});
</script>
</body>
</html>
Output:
Using XMLHttpRequest() method
To trigger ajax request. If the HTTP status is 200 then file exists otherwise file is not present.
Example: To demonstrate using the xmlhttp request() method for checking wether the mentioned files exit or not.
HTML
<!DOCTYPE HTML>
<html>
<head>
<title>
How to check if file exist or
not on HTTP status is 200
</title>
<style>
body {
text-align: center;
}
h1 {
color: green;
}
#output {
color: green;
font-size: 20px;
font-weight: bold;
}
</style>
</head>
<body>
<h1>
GeeksforGeeks
</h1>
<label id="File_Path">
<b>Enter File Path: </b>
</label>
<input type="text" id="File_URL">
<button id="Check_File" onclick="checkFileExist()">
click here
</button>
<p id="output"></p>
<script>
var url = document.getElementById("File_URL");
var output = document.getElementById("output");
var http = new XMLHttpRequest();
function checkFileExist() {
if (url.length === 0) {
output.innerHTML = "Please enter File URL";
} else {
http.open('HEAD', url, false);
http.send();
if (http.status === 200) {
output.innerHTML = "File exists";
} else {
output.innerHTML = "File doesn't exists";
}
}
}
</script>
</body>
</html>
Output: HTTP status is not 200 so if the file exist it will show not exist until the status is 200. 
jQuery is an open source JavaScript library that simplifies the interactions between an HTML/CSS document, It is widely famous with it's philosophy of “Write less, do more". You can learn jQuery from the ground up by following this jQuery Tutorial and jQuery Examples.
Similar Reads
How to check input file is empty or not using JavaScript/jQuery ? Given an HTML document containing an input element, the task is to check whether an input element is empty or not with the help of JavaScript. These are the two approaches to check input file is empty or not using JavaScript/jQuery: Table of Content Using element.files.length property in JavaScript
2 min read
How to download File Using JavaScript/jQuery ? The ability to download files directly from a website is an essential feature for many web applications. Whether you're providing documents, images, or other data, enabling users to download files seamlessly enhances their experience and ensures they can access the content offline. This article prov
2 min read
How to create a File Input using jQuery Mobile ? jQuery Mobile is a web based technology used to make responsive content that can be accessed on all smartphones, tablets and desktops. In this article, we will be creating a File Input Area using jQuery Mobile. Approach: Add jQuery Mobile scripts needed for your project. <link rel=â€stylesheet†hr
1 min read
How to check a URL contains a hash or not using JavaScript ? In this article, the task is to check whether an URL contains or not. This can be done by using the Location hash property in JavaScript. It returns the string which represents the anchor part of a URL including the hash ‘#’ sign. Syntax: window.location.hash Example: This example uses the hash prop
1 min read
How to check element exists or not in jQuery ? Checking if an element exists in jQuery involves selecting the element and verifying its length. If the selected element's length is greater than 0, the element exists in the DOM; otherwise, it doesn't. This is useful for conditionally manipulating elements. There are two ways to check whether an el
3 min read
Bash Scripting - How to check If File Exists In this article, we will write a bash script to check if files exist or not. Syntax :test [expression][ expression ][[ expression ]] Here, in expression, we write parameter and file name. Let us see some parameters that can be used in the expression: - -f: It returns True if the file exists as a com
6 min read