数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究如何使用 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' 回调函数内，如果文件存在，我们可以执行任何所需的 action。例如，我们可以向用户显示文件或执行其他操作。
在 'error' 回调函数内，如果文件不存在，我们可以执行任何所需的 action。例如，我们可以显示错误消息或将用户重定向到其他页面。
语法
$.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 库。一个输入字段用于输入不同的文件路径以检查它们是否存在。如果文件存在，success 函数将显示“提到的文件存在！”消息；如果文件不存在，则 error 函数将在网页上显示“提到的文件不存在！”。
<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，我们将显示“此文件存在！”消息；如果文件不存在，则 error 函数将在网页上显示“此文件不存在！”。
<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 使我们能够检查它。
6K+ 浏览量
