Home > Article > Web Front-end > How to check if a mentioned file exists using JavaScript/jQuery?

How to check if a mentioned file exists using JavaScript/jQuery?

WBOYforward: 2023-08-24 08:05:061352browse

如何使用 JavaScript/jQuery 检查提到的文件是否存在？

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!
   },
})

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>

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!
}

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>

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!

JavaScript jquery ajax Error 回调函数对象 http

Statement：

This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete

Previous article：How to delete a column from an HTML table using JavaScript?Next article：How to delete a column from an HTML table using JavaScript?

See more

How to check if a mentioned file exists using JavaScript/jQuery?

Use ajax() method

grammar

Example

Use XMLHttpRequest() method

grammar

Example

Related articles