本文介绍一种基于 javascript 的轻量级方案，实现上传文件名的自动截断显示与悬停展示全名功能，兼顾可读性、响应性和多文件支持，无需隐藏原 input 元素。
本文介绍一种基于 javascript 的轻量级方案，实现上传文件名的自动截断显示与悬停展示全名功能，兼顾可读性、响应性和多文件支持，无需隐藏原 input 元素。
在 Web 表单中，用户上传文件后常需直观展示所选文件名。但长文件名（如 user-profile-settings-v2-2024-05-exported-from-dashboard.json）极易导致布局溢出或强制换行，影响 UI 一致性。理想体验应为：默认仅显示前 N 个字符 + ...，鼠标悬停时完整显示原始文件名——这恰好可通过 的 change 事件配合 DOM 操作高效实现。
以下是一个生产就绪的实现方案（已适配单/多文件场景）：
<form id="formId">
<label for="inputId">Upload file</label>
<input type="file" id="inputId" accept=".json,.manifest">
<span id="fileNameDisplay" class="file-name-display"></span>
</form>
<style>
.file-name-display {
display: inline-block;
margin-left: 8px;
font-family: var(--font-mono, 'SFMono-Regular', Consolas, 'Liberation Mono', monospace);
font-size: 0.9em;
color: #4a5568;
max-width: 240px; /* 建议设定合理宽度，便于视觉控制 */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
</style>
<script>
const FILE_NAME_DISPLAY = document.getElementById('fileNameDisplay');
const FILE_PICKER_INPUT = document.getElementById('inputId');
// 配置项（可根据项目需求调整）
const MAX_DISPLAY_LENGTH = 16; // 截断前的最大字符数（含省略号）
const ELLIPSIS = '…'; // 推荐使用 Unicode 省略号（U+2026），比 '...' 更规范
FILE_PICKER_INPUT.addEventListener('change', (event) => {
const files = event.target.files;
if (files.length === 0) {
FILE_NAME_DISPLAY.textContent = '';
FILE_NAME_DISPLAY.title = '';
return;
}
// 合并多文件名（用逗号分隔）
const fullNames = Array.from(files).map(file => file.name);
const fullTitle = fullNames.join(', ');
// 设置 title 属性，触发浏览器原生悬停提示
FILE_NAME_DISPLAY.title = fullTitle;
// 截断逻辑：优先按字符数，兼顾可读性（避免在扩展名前截断）
let displayText = fullTitle;
if (fullTitle.length > MAX_DISPLAY_LENGTH) {
displayText = fullTitle.substring(0, MAX_DISPLAY_LENGTH - ELLIPSIS.length) + ELLIPSIS;
}
FILE_NAME_DISPLAY.textContent = displayText;
});
</script>✅ 关键优势说明：
- 零侵入式改造：无需隐藏原 或模拟点击，完全复用原生文件选择器，保障无障碍支持（screen reader 可读）与移动端兼容性；
- 语义清晰：利用原生 title 属性实现悬停提示，无需额外 tooltip 库，轻量且符合 W3C 标准；
- 响应友好：通过 CSS 的 text-overflow: ellipsis + max-width 组合，天然适配不同屏幕尺寸（建议配合 @media 微调 max-width）；
- 健壮扩展：代码已支持多文件上传场景，且易于拓展（如添加文件大小、类型图标、清除按钮等）。
⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- 若需严格按像素宽度而非字符数截断（例如处理中/日/韩文等变宽字体），则需改用 canvas.measureText() 或 getBoundingClientRect() 动态计算渲染宽度，但会增加复杂度；对大多数英文/数字为主的文件名，字符截断已足够可靠；
- title 提示在移动设备上通常不触发（无 hover 概念），如需移动端支持，建议额外添加点击展开面板或使用 aria-describedby + 隐藏 实现可访问的完整信息展示；
- 切勿将 title 作为唯一信息载体——它不具备键盘导航支持，重要元数据（如文件大小）应同步写入 ARIA 属性或相邻可见元素。
该方案平衡了简洁性、可维护性与用户体验，在现代浏览器中表现稳定，是表单文件上传组件的推荐实践。
