是一种常见的前端开发需求,可以通过以下步骤实现:
以下是一个示例的实现代码:
<!DOCTYPE html>
<html>
<head>
<title>选择文件并获取文件名</title>
</head>
<body>
<input type="file" id="fileInput">
<input type="text" id="fileNameInput">
<script>
const fileInput = document.getElementById('fileInput');
const fileNameInput = document.getElementById('fileNameInput');
fileInput.addEventListener('change', function(event) {
const file = event.target.files[0];
const fileName = file.name;
fileNameInput.value = fileName;
});
</script>
</body>
</html>
在上述示例中,<input type="file">
标签用于创建文件选择按钮,<input type="text">
标签用于显示文件名。通过 JavaScript 代码,我们为文件选择按钮添加了一个 change
事件监听器,当用户选择文件后,该事件监听器会触发。在事件处理函数中,我们通过 event.target.files[0]
获取用户选择的文件对象,并通过 file.name
获取文件名,最后将文件名赋值给输入框。
这种功能在许多场景中都有应用,例如上传文件时需要显示文件名,或者在文件管理系统中需要显示文件列表等。腾讯云提供了丰富的云服务产品,其中与文件存储相关的产品包括对象存储(COS)和文件存储(CFS)。您可以根据具体需求选择适合的产品进行文件存储和管理。
请注意,以上仅为示例产品,实际选择应根据具体需求进行评估和决策。
领取专属 10元无门槛券
手把手带您无忧上云