本文介绍一种基于 javascript 的轻量级方案，实现上传文件名的自动截断显示与悬停展示全名功能，兼顾可读性、响应性和多文件支持，无需隐藏原 input 元素。
本文介绍一种基于 javascript 的轻量级方案，实现上传文件名的自动截断显示与悬停展示全名功能，兼顾可读性、响应性和多文件支持，无需隐藏原 input 元素。
在 Web 表单中，用户上传文件后常需直观展示所选文件名。但长文件名（如 user-profile-settings-v2-2024-05-exported-from-dashboard.json）极易导致布局溢出或强制换行，影响 UI 一致性。理想体验应为：默认仅显示前 N 个字符 + ...，鼠标悬停时完整显示原始文件名——这恰好可通过 的 change 事件配合 DOM 操作高效实现。
以下是一个生产就绪的实现方案（已适配单/多文件场景）：
<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>✅ 关键优势说明：
Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转
下载
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
- 零侵入式改造：无需隐藏原 或模拟点击，完全复用原生文件选择器，保障无障碍支持（screen reader 可读）与移动端兼容性；
- 语义清晰：利用原生 title 属性实现悬停提示，无需额外 tooltip 库，轻量且符合 W3C 标准；
- 响应友好：通过 CSS 的 text-overflow: ellipsis + max-width 组合，天然适配不同屏幕尺寸（建议配合 @media 微调 max-width）；
- 健壮扩展：代码已支持多文件上传场景，且易于拓展（如添加文件大小、类型图标、清除按钮等）。
⚠️ 注意事项：
- 若需严格按像素宽度而非字符数截断（例如处理中/日/韩文等变宽字体），则需改用 canvas.measureText() 或 getBoundingClientRect() 动态计算渲染宽度，但会增加复杂度；对大多数英文/数字为主的文件名，字符截断已足够可靠；
- title 提示在移动设备上通常不触发（无 hover 概念），如需移动端支持，建议额外添加点击展开面板或使用 aria-describedby + 隐藏 实现可访问的完整信息展示；
- 切勿将 title 作为唯一信息载体——它不具备键盘导航支持，重要元数据（如文件大小）应同步写入 ARIA 属性或相邻可见元素。
该方案平衡了简洁性、可维护性与用户体验，在现代浏览器中表现稳定，是表单文件上传组件的推荐实践。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
