前端开发实战：自定义文件上传按钮并实现实时显示文件名的完整教程（含代码示例）

1. 目标与需求分析

前端开发实战中，用户体验的核心往往来自控件的直观交互。本节聚焦于实现一个

自定义文件上传按钮，并在用户选择文件时实现实时显示文件名，以提升反馈速度和可用性。

在设计初期，需明确需要覆盖的场景：单文件上传、多文件上传、以及在不同浏览器下的兼容性。通过隐藏原生 input 元素并替换成自定义按钮，可以获得更一致的外观风格，同时确保功能不被削弱。

为确保可维护性，应该把结构、样式、逻辑分离，并为将来的扩展留出空间，例如增加拖拽上传、进度提示等能力。

2. 实现技术选型与架构设计

2.1 DOM 结构设计

实现目标的第一步是搭建清晰的 DOM 结构：一个隐藏的 input[type="file"]、一个可点击的自定义按钮，以及一个用于显示已选文件名的区域。

这样的结构便于通过事件驱动来维护状态，并能方便地扩展到多文件或拖拽上传场景。你可以将按钮和显示区域放在同一容器中，以便于样式对齐与逻辑联动。

在实现中，隐藏原生输入的方式会影响无障碍性，因此需要在后续阶段通过 ARIA 属性和键盘事件来保持可访问性。

2.2 事件绑定与数据流

核心交互包括：点击自定义按钮触发输入框，以及在 change 事件中读取 FileList，并将名称渲染到界面上。

对于实时性，建议在每次选择文件后刷新显示区域：这是实现实时显示文件名的直接方式，并有利于在多文件场景下同步所有文件名。

<!-- 结构占位，示例：隐藏输入+自定义按钮+显示区域 -->
<div class="upload-wrap"><input id="fileInput" type="file" multiple style="display:none;"><button id="customBtn" type="button">选择文件</button><ul id="fileList" class="file-list"></ul>
</div>

2.3 样式与交互

美观的按钮和清晰的文件名列表是提升用户体验的关键。通过自定义按钮的样式、隐藏输入框以及对提示信息的颜色对比，可以让交互更直观。

可访问性方面，确保按钮具有可聚焦状态、提供键盘触发，以及在屏幕阅读器中能够解释当前控件的用途。

/* 示例 CSS：自定义按钮与列表样式 */ 
.upload-wrap { display: inline-block; }
#customBtn { padding: 0.6rem 1rem; border-radius: 6px; border: 1px solid #2c6cb9; background: #2c6cb9; color: #fff; cursor: pointer; }
#customBtn:focus { outline: 2px solid #80bdff; outline-offset: 2px; }
.file-list { list-style: none; padding: 0; margin: 0; margin-top: 0.5rem; font-family: sans-serif; }
.file-list li { padding: 0.25rem 0; color: #333; }

3. 实现细节：自定义文件上传按钮与实时显示文件名

3.1 HTML 结构与隐藏输入

要实现自定义按钮，需要将原生的 input[type="file"] 隐藏，同时提供一个可以被点击的按钮来触发文件选择。实时显示的核心在于对 change 事件的处理，以及将选中的文件名列表渲染到页面。

下面给出一个简洁的实现模板，其中包含多文件选择能力、以及对空选择的鲁棒处理。

<!-- 完整的结构模板 -->
<div class="upload-wrap" aria-label="自定义文件上传组件"><input id="fileInput" type="file" multiple aria-hidden="true" style="position:absolute; left:-9999px; width:1px; height:1px;" /><button id="customBtn" type="button">选择文件</button><ul id="fileList" class="file-list" aria-live="polite"></ul>
</div>

3.2 JavaScript：实时获取并渲染文件名

核心逻辑在于拿到 FileList，将其转换为名称数组，然后渲染到页面。每次选择后都刷新列表，确保实时性。若需要支持多文件上传，这一步也要考虑到文件数量的上限提示。

// 选择器与初始化
const fileInput = document.getElementById('fileInput');
const customBtn = document.getElementById('customBtn');
const fileList = document.getElementById('fileList');// 触发隐藏的文件输入
customBtn.addEventListener('click', () => {fileInput.click();
});// 监听选择变化并渲染
fileInput.addEventListener('change', (e) => {const files = Array.from(e.target.files); // FileList → Array// 清空现有列表fileList.innerHTML = '';if (files.length === 0) {fileList.innerHTML = '<li>未选择文件</li>';return;}files.forEach((file, index) => {const li = document.createElement('li');li.textContent = `${index + 1}. ${file.name} (${Math.round(file.size / 1024)} KB)`;fileList.appendChild(li);});
});

4. 无障碍设计与兼容性考量

4.1 键盘与屏幕阅读器支持

为了确保无障碍性，建议为自定义按钮提供等效的语义，且在需要时提供明确的 ARIA 标签。通过 aria-label、aria-live 属性，可以让屏幕阅读器及时读取动态更新的文件名列表。

此外，隐藏的输入框尽量保留在可访问的区域内的可聚焦读取顺序，以避免对可访问性产生负面影响。

4.2 浏览器兼容性与性能

现代浏览器对 input[type="file"] 与 File API 的支持较好，但在旧浏览器中可能需要回退方案。渐进增强策略是优选：先实现最小可用版本，再逐步添加多文件、拖拽等增强功能。

/* 简单的动画过渡，提升交互感觉 */ 
.file-list li { transition: color .2s ease, background-color .2s ease; }
.file-list li:hover { background: #f0f4ff; color: #1a6bd3; }

5. 完整实现示例与应用场景

5.1 HTML 结构示例

以下示例将前面的独立片段整合成一个可直接使用的组件模板，便于快速在页面中落地。

<div class="upload-wrap" aria-label="自定义文件上传组件"><input id="fileInput" type="file" multiple aria-hidden="true" style="position:absolute; left:-9999px; width:1px; height:1px;" /><button id="customBtn" type="button">选择文件</button><ul id="fileList" class="file-list" aria-live="polite"></ul>
</div>

5.2 CSS 样式示例

通过简单的样式，实现美观的按钮和清晰的文件名呈现。

.upload-wrap { display: inline-block; }
#customBtn { padding: 0.6rem 1rem; border-radius: 6px; border: 1px solid #2c6cb9; background: #2c6cb9; color: #fff; cursor: pointer; }
#customBtn:focus { outline: 2px solid #80bdff; outline-offset: 2px; }
.file-list { list-style: none; padding: 0; margin: 0.5rem 0 0; font-family: sans-serif; }
.file-list li { padding: 0.25rem 0; color: #333; }

5.3 JavaScript 逻辑示例

这是将隐藏输入、触发打开、以及实时渲染文件名的核心逻辑。

const fileInput = document.getElementById('fileInput');
const customBtn = document.getElementById('customBtn');
const fileList = document.getElementById('fileList');customBtn.addEventListener('click', () => {fileInput.click();
});fileInput.addEventListener('change', (e) => {const files = Array.from(e.target.files);fileList.innerHTML = '';if (files.length === 0) {fileList.innerHTML = '<li>未选择文件</li>';return;}files.forEach((file, idx) => {const li = document.createElement('li');li.textContent = `${idx + 1}. ${file.name} - ${Math.round(file.size / 1024)} KB`;fileList.appendChild(li);});
});