資料結構
網路
關係資料庫管理系統 (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+ 瀏覽量
