Using JavaScript or jQuery we can check if a file exists and retrieve metadata about the file such as its size, content type, last modified date, etc. without retrieving the actual file . Use HTTP HEAD request in this case. An HTTP HEAD request is an HTTP request that asks the server to return the HTTP headers for a specified resource without returning the actual resource itself.
Several methods can be used to send HTTP HEAD requests, but the most popular method is to use the $.ajax() method and the XMLHttpRequest object. The user can define the request type as "HEAD" using any of these methods and can also include a callback function to handle the response. If the file exists in the server response, the callback function will be called. If the file does not exist, the callback function is not called and an exception is thrown.
If we find that the mentioned file exists, we can take any action, such as showing the actual file or showing a message consisting of the file's metadata, etc. If the mentioned file does not exist we can show error message exists. It will improve performance since we're not trying to get the actual large file; instead we're checking its status.
Use ajax() method
To check if a file exists using $.ajax() method in jQuery, we can use the following steps -
Create an object containing type, "url", "success" and "error" options. The type option should be set to "HEAD", the "url" option should be set to the URL of the file we want to check, and the "success" and "error" options should be callback functions to handle the response if the request is successful respectively or fail.
Call the "$.ajax()" method and pass in the object we created in step 1 as a parameter.
In the "success" callback function, if the file exists, we can take any desired action. For example, we can display files to the user or perform other actions.
In the "error" callback function, we can take any desired action if the file does not exist. For example, we can display an error message or redirect the user to a different page
grammar
$.ajax({
url: url,
type: 'HEAD',
success: function () {
// The mentioned file exist!
},
error: function () {
// The mentioned file does not exist!
},
})
Copy after login
The syntax shows that the type attribute is set to HEAD to specify that we are sending a HEAD request to the server. The url property is set to the URL of the server-side script or application we want to send the request to.
Example
In this example, we use ajax method to check if the mentioned file exists. We used jQuery's ajax library. Put input fields into different file paths to check if they exist. If the file exists, the success function displays the message "The file mentioned exists!" on the web page, and if the file does not exist, the error function displays the message "The file mentioned does not exist!" on the web page.
<html>
<head>
<script src ="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<h2>Checking if Mentioned <i>File Exists or not</i> using JavaScript/jQuery</h2>
<h4>Enter file path:</h4>
<input id = "file_path" name = "file_path" />
<button onclick="checkFile()">Check File</button>
<div id = "root" style = "padding: 10px; background: #b8f0ea"></div>
<script>
let root = document.getElementById('root')
let file_path = document.getElementById('file_path')
function checkFile() {
$.ajax({
url: file_path.value,
type: 'HEAD',
success: function () {
root.innerHTML = 'The mentioned file exist!'
},
error: function () {
root.innerHTML = 'The mentioned file does not exist!'
},
})
}
</script>
</body>
</html>
Copy after login
Use XMLHttpRequest() method
To check if a file exists using the "XMLHttpRequest" object in JavaScript we can use the following steps -
Create a new "XMLHttpRequest" object.
Use the "open()" method of the "XMLHttpRequest" object to specify the URL of the file we want to check, and set the request method to "HEAD".
Use the "send()" method of the "XMLHttpRequest" object to send the request.
Check the "status" attribute of the "XMLHttpRequest" object to see if the file exists. If the 'status' attribute is 200, the file exists; if the 'status' attribute is 404, the file does not exist.
grammar
var http = new XMLHttpRequest()
http.open('HEAD', url, false)
http.send()
if (http.status === 200) {
//This file exist!
} else {
//This file does not exist!
}
Copy after login
In the above syntax, we use XMLHttpRequest(), and based on the status code, we can write the code whether the file exists.
Example
In this example, we use the XMLHttpRequest() method to check if the mentioned file exists. Put input fields into different file paths to check if they exist. If the file exists, the status code will be 200 and we will display the "This file exists!" message, if the file does not exist, the error function displays the "This file does not exist!" page on the network.
<html>
<body>
<h2>Checking If Mentioned File Exists or not using JavaScript/ jQuery</h2>
<h4>Enter file path:</h4>
<input id = "file_path" name = "file_path" />
<button onclick = "checkFile()">Check File</button>
<div id = "root" style = "padding: 10px; background: #f0ecb8"></div>
<script>
let root = document.getElementById('root')
let file_path = document.getElementById('file_path')
function checkFile() {
var http = new XMLHttpRequest()
http.open('HEAD', file_path.value, false)
http.send()
if (http.status === 200) {
root.innerHTML = 'This file exist!'
} else {
root.innerHTML = 'This file does not exist!'
}
}
</script>
</body>
</html>
Copy after login
Checking whether a mentioned file exists is a good practice when working with large data files, and JavaScript and jQuery give us the ability to check it.
The above is the detailed content of How to check if a mentioned file exists using JavaScript/jQuery?. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
