如何使用 JavaScript/jQuery 检查输入文件是否为空?
在 JavaScript 中，在使用表单元素时，我们需要在用户输入值时验证输入字段和表单元素。在本教程中，我们将使用文件输入。
我们还将学习验证文件输入。有时，我们可能需要检查文件是否在输入字段中被选中，然后才启用提交按钮；否则，禁用提交按钮。因此，它不会允许用户在未选择表单或文件的情况下提交它。
使用 JavaScript 验证文件输入
在 JavaScript 中，我们可以使用 id、name、tag name 或 class name 访问文件输入。之后，我们可以检查文件输入字段是否包含任何文件值。我们可以将事件监听器添加到文件输入以用于更改事件。因此，每当文件输入的值发生变化时，都会调用事件侦听器，我们可以检查文件输入是否包含任何文件。
语法
用户可以按照以下语法使用 JavaScript 检查文件输入是否为空。
fileInput.addEventListener("change", function () {
if (fileInput.files.length == 0) {
// 文件输入为空
} else {
// 文件已选中
}
});
在上述语法中，我们在文件输入中添加了 change 事件的事件侦听器。此外，我们已将函数表达式作为回调函数传递，该函数检查是否选择了任何文件。
文件输入包含文件数组，如果文件输入中没有上传任何文件，我们可以检查数组的长度是否为零。
示例
在此示例中，我们创建了提交按钮。它在开始时处于禁用状态，当用户上传任何单个文件时，我们使用 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 () {
// 检查文件是否被选中
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 库之一，它提供了简单干净的语法来编写代码。我们可以通过将 jQuery 的 CDN 添加到 HTML 代码的 <head> 标记中来将其与 HTML 代码一起使用。
由于我们可以在 JavaScript 中访问文件输入，因此我们也可以使用各种方法在 jQuery 中访问它。之后，我们可以检查文件输入的"files"属性的长度，以确保文件输入是否为空。
语法
用户可以按照以下语法使用 jQuery 检查文件输入是否包含任何文件
let files = $("#fileInput")[0].files.length;
if (files != 0) {
// 已选择文件
} else {
// 未选择文件
}
在上述语法中，我们通过其 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"属性的长度以确保文件输入为空或选择了任何文件。
