如何在HTML中实现上传文件部分文件名显示（hover展示全名）

你不用完全隐藏原生file input，推荐用「原生input+自定义显示元素」的组合方案，既保留原生文件上传的所有功能（比如键盘操作、浏览器原生弹窗、类型过滤），又能轻松实现文件名截断和悬停显示完整名称的需求，代码更简洁可靠。

实现思路 #

1. 用容器包裹原生input和自定义文件名显示元素，通过CSS隐藏原生input的文件名部分，只保留按钮
2. 监听input的change事件，获取选中文件的名称（直接取file.name，避免处理路径兼容问题）
3. 判断文件名长度，超过阈值就截断并添加省略号，同时把完整名称赋值给显示元素的title属性（原生支持悬停显示）

完整代码示例 #

HTML

<form id="formId">
  <div class="file-upload-wrap">
    <label for="inputId">Upload file</label>
    <input type="file" id="inputId" accept=".json,.manifest" class="file-input">
    <span class="file-name"></span>
  </div>
</form>

CSS

.file-upload-wrap {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  position: relative;
}

/* 隐藏原生input的文件名文本，只保留按钮 */
.file-input {
  text-indent: -9999px;
  white-space: nowrap;
  width: auto;
}

/* 自定义文件名显示样式：超出截断、悬停提示 */
.file-name {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: help;
  color: #333;
}

JavaScript

const fileInput = document.getElementById('inputId');
const fileNameEl = document.querySelector('.file-name');
const MAX_DISPLAY_LENGTH = 18; // 自定义允许的最大显示字符数

fileInput.addEventListener('change', (e) => {
  const selectedFile = e.target.files[0];
  if (!selectedFile) {
    fileNameEl.textContent = '';
    fileNameEl.removeAttribute('title');
    return;
  }

  const fullName = selectedFile.name;
  let displayName = fullName;

  if (fullName.length > MAX_DISPLAY_LENGTH) {
    displayName = `${fullName.slice(0, MAX_DISPLAY_LENGTH)}...`;
  }

  fileNameEl.textContent = displayName;
  fileNameEl.setAttribute('title', fullName);
});

方案优势 #

• 兼容性强：保留原生input的所有原生功能，不会出现自定义按钮触发文件选择的兼容性问题
• 代码简洁：CSS负责样式控制，JS只处理文件名逻辑，分工清晰
• 体验友好：利用原生title属性实现悬停显示完整名称，无需额外写hover事件

内容的提问来源于stack exchange，提问作者Jack