如何使用 JavaScript/jQuery 检查提及的文件是否存在?
使用 JavaScript 或 jQuery，我们可以检查文件是否存在并检索有关文件的元数据，例如其大小、内容类型、上次修改日期等，而无需检索实际文件。在这种情况下使用 HTTP HEAD 请求。HTTP HEAD 请求是一种 HTTP 请求，它要求服务器返回指定资源的 HTTP 标头，而不返回实际资源本身。
可以使用多种方法来发送 HTTP HEAD 请求，但最流行的方法是使用 $.ajax() 方法和 XMLHttpRequest 对象。用户可以使用这些方法中的任何一种将请求类型定义为"HEAD"，还可以包含回调函数来处理响应。如果文件与服务器响应一起存在，则将调用回调函数。如果文件不存在，则不会调用回调函数，并抛出异常。
如果我们发现提到的文件存在，我们可以采取任何行动，例如显示实际文件或显示由文件元数据组成的消息等。如果提到的文件不存在，我们可以显示错误消息。这将提高性能，因为我们没有尝试获取实际的大文件；而是检查其状态。
使用 ajax() 方法
要使用 jQuery 中的 $.ajax() 方法检查文件是否存在，我们可以使用以下步骤 -
创建一个包含 type、'url'、'success' 和 'error' 选项的对象。 type 选项应设置为"HEAD"，'url' 选项应设置为我们要检查的文件的 URL，'success' 和 'error' 选项应分别是处理请求成功或失败时的响应的回调函数。
调用 '$.ajax()' 方法并传入我们在步骤 1 中创建的对象作为参数。
在 'success' 回调函数中，如果文件存在，我们可以采取任何所需的操作。例如，我们可以向用户显示文件或执行其他操作。
在 'error' 回调函数中，如果文件不存在，我们可以采取任何所需的操作。例如，我们可以显示错误消息或将用户重定向到其他页面
语法
$.ajax({
url: url,
type: 'HEAD',
success: function () {
// 提到的文件存在!
},
error: function () {
// 提到的文件不存在!
},
})
语法显示 type 属性设置为 HEAD，以指定我们正在向服务器发送 HEAD 请求。 url 属性设置为我们要发送请求的服务器端脚本或应用程序的 URL。
示例
在此示例中，我们使用 ajax 方法检查提到的文件是否存在。 我们使用了 jQuery 的 ajax 库。 输入字段被放入不同的文件路径以检查它们是否存在。如果文件存在，成功函数会在网页上显示'所提及的文件存在!'信息，如果文件不存在，错误函数会在网页上显示'所提及的文件不存在!'。
<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) {
//此文件存在!
} else {
//此文件不存在!
}
在上述语法中，我们使用 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 为我们提供了检查它的能力。
