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

使用JavaScript或jQuery，我们可以检查一个文件是否存在，并检索关于该文件的元数据，如它的大小，内容类型，最后修改日期等，而无需检索实际的文件。在这种情况下，就会使用HTTP HEAD请求。HTTP HEAD请求是一种HTTP请求，它要求服务器返回指定资源的HTTP头文件，而不返回实际资源本身。

有几种方法可以用来发送HTTP HEAD请求，但最流行的方法是使用$.ajax()方法和XMLHttpRequest对象。用户可以使用这些方法中的任何一种将请求类型定义为 “HEAD”，还可以包括一个回调函数来处理响应。如果文件与服务器响应一起存在，回调函数将被调用。如果文件不存在，回调函数不被调用，并抛出一个异常。

如果我们发现提到的文件存在，我们可以在这之后采取任何行动，例如显示实际的文件或显示由文件元数据组成的消息，等等。如果提到的文件不存在，我们可以显示一个错误信息。如果我们没有尝试获取实际的大文件，而是检查其状态，这将提高性能。

使用ajax()方法

使用jQuery中的$.ajax()方法来检查一个文件是否存在，我们可以使用以下步骤– 1.

创建一个包含类型、”url”、”success “和 “error “选项的对象。type选项应该设置为 “HEAD”，’url’选项应该设置为我们要检查的文件的URL，’success’和’error’选项应该是回调函数，分别处理请求成功或失败时的响应。
调用’$.ajax()’方法并传入我们在第1步中创建的对象作为参数。
在’success’回调函数中，如果文件存在，我们可以采取任何想要的行动。例如，我们可以向用户显示该文件或执行其他操作。
在’error’回调函数中，如果文件不存在，我们可以采取任何想要的行动。例如，我们可以显示一个错误信息或将用户重定向到一个不同的页面。

语法

$.ajax({ 
   url: url,
   type: 'HEAD',
   success: function () {
      // The mentioned file exist!
   },
   error: function () {
      // The mentioned file does not exist!
   },
})

语法显示，type属性被设置为HEAD，以指定我们向服务器发送一个HEAD请求。url属性被设置为我们要发送请求的服务器端脚本或应用程序的URL。

例子

在这个例子中，我们使用ajax方法来检查提到的文件是否存在。我们使用了jQuery的ajax库。一个输入字段被放入不同的文件路径以检查它们是否存在。如果文件存在，成功函数会显示 “The mentioned file exist!”信息，如果文件不存在，那么错误函数会在网页上显示 “The mentioned file does not exist!”。

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

使用XMLHttpRequest()方法

为了在JavaScript中使用’XMLHttpRequest’对象检查一个文件是否存在，我们可以使用以下步骤

创建一个新的’XMLHttpRequest’对象。
使用’XMLHttpRequest’对象的’open()’方法，指定我们要检查的文件的URL，并将请求方法设置为 “HEAD”。
使用’XMLHttpRequest’对象的’send()’方法来发送该请求。
检查’XMLHttpRequest’对象的’status’属性，看看该文件是否存在。如果’status’属性是200，说明该文件存在；如果’status’属性是404，说明该文件不存在。

语法

var http = new XMLHttpRequest()
http.open('HEAD', url, false)
http.send()
if (http.status === 200) {

   //This file exist!
} else {

   //This file does not exist!
}

在上面的语法中，我们使用的是XMLHttpRequest()，根据状态代码，我们可以写出文件存在或不存在的代码。

例子

在这个例子中，我们使用XMLHttpRequest()方法来检查上述文件是否存在。一个输入字段被放入不同的文件路径以检查它们是否存在。如果文件存在，那么状态代码将是200，我们将显示 “此文件存在！”的消息，如果文件不存在，那么错误函数将在网页上显示 “此文件不存在！”。

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

检查所提到的文件是否存在是使用大型数据文件的良好做法，而JavaScript和jQuery给了我们检查它的权力。