以下是一个简单的例子，演示如何在 HTML 和 JavaScript 中使用文件上传框：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文件上传示例</title>
</head>
<body>
<label for="fileInput">选择文件:</label>
<input type="file" id="fileInput">
<button onclick="displaySelectedFile()">显示选择的文件</button>
<script>
function displaySelectedFile() {
// 获取文件上传框的值
var fileInput = document.getElementById('fileInput');
// 检查用户是否选择了文件
if (fileInput.files.length > 0) {
// 获取第一个选择的文件
var selectedFile = fileInput.files[0];
// 显示选择的文件信息
alert("选择的文件是: " + selectedFile.name + "\n文件大小: " + selectedFile.size + " 字节");
} else {
alert("请先选择文件");
}
}
</script>
</body>
</html>
在这个例子中，我们创建了一个包含文件上传框和一个按钮的简单 HTML 页面。当用户选择文件并点击按钮时，JavaScript 函数 displaySelectedFile 获取文件上传框的值，检查用户是否选择了文件，并通过 alert 函数显示选择的文件信息，如文件名和大小。
请注意，通过 type="file" 的输入框，用户可以选择一个或多个文件。在实际应用中，你可能需要根据需要处理单个或多个文件。
转载请注明出处：http://www.pingtaimeng.com/article/detail/6210/JavaScript 和 HTML DOM