选择文件后，文件名未显示

当选择文件后，文件名未显示的问题可能涉及前端开发中的文件输入控件（<input type="file">）的使用和事件处理。以下是关于这个问题的基础概念、可能的原因以及解决方案。

基础概念

文件输入控件允许用户从本地计算机选择一个或多个文件。通常，当用户选择文件后，浏览器会自动填充文件名到控件旁边的文本框中。如果文件名未显示，可能是由于以下几个原因：

可能的原因

JavaScript事件未正确处理：可能没有正确地绑定事件监听器来处理文件选择后的操作。
CSS样式问题：某些CSS样式可能隐藏了文件名显示的部分。
HTML结构问题：文件输入控件的HTML结构可能不正确，导致文件名无法正确显示。

解决方案

以下是一个简单的示例，展示如何正确处理文件选择事件并显示文件名：

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>File Input Example</title>
    <style>
        .file-input-wrapper {
            position: relative;
            display: inline-block;
        }
        .file-input-wrapper input[type="file"] {
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
            width: 100%;
            height: 100%;
        }
        .file-input-name {
            display: inline-block;
            padding: 8px;
            border: 1px solid #ccc;
            background-color: #f9f9f9;
        }
    </style>
</head>
<body>
    <div class="file-input-wrapper">
        <input type="file" id="fileInput">
        <span class="file-input-name">No file chosen</span>
    </div>

    <script>
        document.getElementById('fileInput').addEventListener('change', function(event) {
            const fileName = event.target.files[0].name;
            document.querySelector('.file-input-name').textContent = fileName;
        });
    </script>
</body>
</html>

解释

HTML结构：
- 使用一个<div>包裹文件输入控件和一个用于显示文件名的<span>。
- 文件输入控件的opacity设置为0，使其在视觉上不可见，但仍然可以点击。

CSS样式：
- 使用.file-input-wrapper来包裹文件输入控件和文件名显示部分，确保它们在同一位置。
- .file-input-name用于显示文件名，并设置了一些基本的样式。
JavaScript事件处理：
- 使用addEventListener监听文件输入控件的change事件。
- 当用户选择文件后，获取文件名并更新.file-input-name的内容。