如何在文本输入框内部添加文件浏览按钮并实现选中文件名回填？

核心实现思路 #

• 用相对定位的容器包裹文本框、自定义浏览按钮、原生文件选择控件，将原生文件控件设为全透明覆盖在自定义浏览按钮上层，无需额外写点击触发逻辑就能实现点击浏览调起文件选择器的效果
• 原生文件输入框不添加multiple属性，默认仅支持选择单个文件
• 监听文件选择器的变更事件，拿到选中文件的文件名后直接赋值给文本输入框完成展示
• 浏览按钮通过绝对定位固定在文本框内部右侧，文本框预留右侧内边距避免文件名被按钮遮挡

完整实现代码 #

HTML结构 #

<div class="file-field-container">
  <!-- 展示文件名的文本输入框 -->
  <input type="text" class="text-input" placeholder="未选择任何文件" readonly>
  <!-- 可见的浏览按钮 -->
  <span class="browse-btn">浏览</span>
  <!-- 透明原生文件选择控件，覆盖在浏览按钮上方承接点击 -->
  <input type="file" class="hidden-file-picker">
</div>

CSS样式 #

.file-field-container {
  position: relative;
  width: 400px;
}
.text-input {
  width: 100%;
  height: 38px;
  box-sizing: border-box;
  padding: 0 88px 0 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
}
.browse-btn {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 78px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  background: #f0f0f0;
  border-left: 1px solid #ccc;
  border-radius: 0 3px 3px 0;
  cursor: pointer;
  user-select: none;
}
.hidden-file-picker {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 78px;
  height: 32px;
  opacity: 0;
  cursor: pointer;
}

交互逻辑JS #

const textInput = document.querySelector('.text-input');
const filePicker = document.querySelector('.hidden-file-picker');

filePicker.addEventListener('change', function() {
  if (!this.files.length) return;
  // 单文件选择模式下直接取第一个文件的名称赋值给文本框
  textInput.value = this.files[0].name;
});

注意事项 #

• 文本框添加readonly属性，避免用户手动输入修改文件名，保证展示内容和实际选中文件一致
• 外层容器必须设置position: relative，否则内部绝对定位的按钮会偏移到文本框外部
• 不要给.hidden-file-picker添加multiple属性，否则会支持多选不符合需求
• 文本框的右侧内边距需要大于浏览按钮宽度，避免长文件名显示时被按钮遮挡

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