数据结构
网络
关系型数据库管理系统
操作系统
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+ 次浏览
