資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何使用 JavaScript/jQuery 檢查輸入檔案是否為空？
在 JavaScript 中，當處理表單元素時，我們需要在使用者輸入值時驗證輸入欄位和表單元素。在本教程中，我們將使用檔案輸入。
我們還將學習如何驗證檔案輸入。有時，我們可能需要檢查是否在輸入欄位中選擇了檔案，然後才啟用提交按鈕；否則，停用提交按鈕。因此，它不允許使用者在不選擇檔案的情況下提交表單或檔案。
使用 JavaScript 驗證檔案輸入
在 JavaScript 中，我們可以使用id、name、標籤名稱或類名訪問檔案輸入。之後，我們可以檢查檔案輸入欄位是否包含任何檔案值。我們可以為檔案輸入新增更改事件的事件監聽器。因此，每當檔案輸入的值發生更改時，都會呼叫事件監聽器，並且我們可以檢查檔案輸入是否包含任何檔案。
語法
使用者可以按照以下語法使用 JavaScript 檢查檔案輸入是否為空。
fileInput.addEventListener("change", function () {
if (fileInput.files.length == 0) {
// file input is empty
} else {
// file is selected
}
});
在以上語法中，我們為檔案輸入中的更改事件添加了事件監聽器。此外，我們還傳遞了函式表示式作為回撥函式，該函式檢查是否選擇了任何檔案。
檔案輸入包含檔案的陣列，如果未將任何檔案上傳到檔案輸入，我們可以檢查陣列的長度是否為零。
示例
在本例中，我們建立了提交按鈕。它在開始時處於停用狀態，當用戶上傳任何單個檔案時，我們使用 JavaScript 啟用該按鈕。我們已透過 id 選擇了檔案輸入並使用了“files”屬性（它是陣列型別）來檢查是否選擇了任何檔案。
<html>
<body>
<h2>Using the <i> JavaScript </i> to check whether file input is empty</h2>
<input type = "file" id = "fileInput" /><br /><br />
<button id = "click" disabled>Submit File </button>
<script>
let clickButton = document.getElementById("click");
let fileInput = document.getElementById("fileInput");
fileInput.addEventListener("change", function () {
// check if the file is selected or not
if (fileInput.files.length == 0) {
clickButton.disabled = true;
clickButton.opacity = 0.3;
} else {
clickButton.disabled = false;
clickButton.style.opacity = 1;
}
});
</script>
</body>
</html>
使用 jQuery 驗證檔案輸入
jQuery 是最常用的JavaScript 庫之一，它提供簡單易懂的語法來編寫程式碼。我們可以透過將它的 CDN 新增到 HTML 程式碼的<head>標籤中來將 jQuery 與 HTML 程式碼一起使用。
就像我們可以在 JavaScript 中訪問檔案輸入一樣，我們也可以使用各種方法在 jQuery 中訪問它。之後，我們可以檢查檔案輸入的“files”屬性的長度，以確保檔案輸入是否為空。
語法
使用者可以按照以下語法使用 jQuery 檢查檔案輸入是否包含任何檔案
let files = $("#fileInput")[0].files.length;
if (files != 0) {
// file selected
} else {
// file not selected
}
在以上語法中，我們已透過其 id 選擇了檔案輸入。“#”表示 id。
示例
在下面的示例中，我們建立了validateFileInput()按鈕，當用戶點選“點選我”按鈕時，該按鈕會呼叫。該函式透過 id 選擇檔案輸入，檢查其“files”屬性的長度，並在螢幕上向用戶顯示驗證訊息。
<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js" integrity = "sha512-STof4xm1wgkfm7heWqFJVn58Hm3EtS31XFaagaa8VMReCXAkQnJZ+jEy8PCC/iT18dFy95WcExNHFTqLyp72eQ==" crossorigin = "anonymous" referrerpolicy = "no-referrer"></script>
</head>
<body>
<h2>Using <i>jQuery </i> to check if the file input is empty or not</h2>
<input type = "file" id= "fileInput" /><br /><br />
<button id = "click" onClick = "validateFileInput()"> Click me </button>
<p id = "output"> </p>
<script>
let output = document.getElementById("output");
function validateFileInput() {
let files = $("#fileInput")[0].files.length;
if (files != 0) {
output.innerHTML += "File is selected! <br/>";
} else {
output.innerHTML += "Please, select a file!<br>";
}
}
</script>
</body>
</html>
使用者學習瞭如何使用 JavaScript 或 JQuery 驗證檔案輸入。在這兩個示例中，我們都已使用 id 訪問了檔案輸入。但是，使用者可以使用類名、標籤名或名稱訪問檔案輸入，並檢查“files”屬性的長度，以確保檔案輸入是否為空或是否選擇了任何檔案。
8K+ 次瀏覽
