最简方案是为显示文件名的元素添加title属性，鼠标悬停即显示全称；需注意title必须绑定在<span>等显示元素上而非<input>本身，且移动端Safari支持弱，不可依赖。
用 title 属性快速显示文件名全称（最简方案）
原生 <input type="file"> 不渲染文件名，必须手动提取并插入页面。直接写 files[0].name 到 <span> 里，长名（如 report-Q3-2026-final-v2-validated.json）极易撑破容器或换行。此时加 title 是成本最低的补救：鼠标悬停即显示完整名，无需 JS、无兼容性风险。
关键点：
-
title必须绑定在**显示文件名的元素上**（不是<input>自身），否则无效 - 纯文本内容，不支持 HTML 标签、换行或样式
- 移动端 Safari 对
title支持弱，长按不一定触发，不能依赖它做核心提示
用 JavaScript 截断 + title 实现可控显示（推荐落地做法）
截断逻辑要明确长度阈值和省略符位置，避免在扩展名前硬切（如把 photo.jpg 切成 ph…）。实际中建议保留扩展名，只截文件主体。
示例逻辑：
立即学习“前端免费学习笔记（深入）”；
const MAX_DISPLAY_LENGTH = 20;
const file = files[0];
const dotIndex = file.name.lastIndexOf('.');
const namePart = dotIndex > 0 ? file.name.slice(0, dotIndex) : file.name;
const extPart = dotIndex > 0 ? file.name.slice(dotIndex) : '';
const display = namePart.length > MAX_DISPLAY_LENGTH
? namePart.slice(0, MAX_DISPLAY_LENGTH - 1) + '…' + extPart
: file.name;
<p>displayEl.textContent = display;
displayEl.title = file.name;
注意：
- 别用空格或连字符作为截断依据——文件名可能不含它们
-
ELLIPSIS推荐用 Unicode…（U+2026），比三个英文点...更紧凑、语义正确 - 多文件时，
title应拼接全部文件名，用换行符\n分隔（部分浏览器支持）
拖拽区域中提前校验并提示错误类型（防误操作关键）
用户把不支持的文件（如 .exe 或超大视频）拖进上传区，等松手才报错，体验很差。应在 dragenter 阶段就检查 e.dataTransfer.items 的 type，即时反馈。
实操要点：
- 仅靠
type字段判断 MIME 类型，不要等drop后读取File对象——后者需异步，延迟明显 - iOS Safari 的
dataTransfer.items在某些版本返回空数组，需 fallback 到files数组（但仅限drop后） - 提示文案要具体，例如 “仅支持 JPG/PNG，当前为
application/pdf”，而不是笼统的 “文件类型不支持”
表单提交后显示成功/失败状态（非文件名提示，但常被混为一谈）
很多人搜“上传提示”实际想解决的是提交后的反馈问题。这和文件名展示无关，而是状态消息管理。
必须处理的细节：
- 用
aria-live="polite"包裹提示容器，确保屏幕阅读器能播报，否则视障用户完全不知结果 - 成功提示出现后，别只靠定时器自动隐藏——用户可能没来得及读完；应提供手动关闭按钮或聚焦到提示区域
- 若提交失败，
aria-live="assertive"+role="alert"才能强制打断当前语音播报
真正难的不是显示文字，是让提示在各种设备、辅助技术、网络延迟场景下都可靠传达。别跳过 ARIA 和可访问性测试。
