如何自定义文件上传按钮并实时显示选中的文件名？

浏览器自带的文件选择控件在不同系统下外观差异很大，而且几乎无法用CSS直接美化，这在追求界面统一的项目里是个明显的短板。更常见的需求是：用户选中文件后，页面上能立刻把文件名展示出来，方便确认是否选对了文件。本文就用最朴素的HTML、CSS和JavaScript，手把手实现一个自定义的文件上传按钮，并让它实时显示选中的文件名。

实现思路：隐藏原生控件，用label触发点击

核心思路其实很简单：input元素的type为file时虽然样式难看，但它的功能不能丢。我们可以把这个原生输入框在视觉上隐藏掉，然后自己画一个漂亮的按钮，通过label标签的for属性或者JavaScript手动触发input的点击事件，弹出文件选择对话框。

有两种常见的触发方式。第一种是利用label标签的天然关联性，只要label的for属性指向input的id，点击label就等价于点击input，不需要写任何JavaScript来触发点击。第二种是用JS监听自定义按钮的click事件，然后调用input的click方法，这种方式灵活性更高，比如可以在点击前做一些校验。两种方式各有优劣，前者代码最少，后者控制力更强，实际项目中可以按需选择。

隐藏原生控件时要注意，不要简单地使用display:none或者visibility:hidden，虽然在大多数浏览器下点击label仍然有效，但个别老版本浏览器可能出现无法触发文件选择的兼容问题。更稳妥的做法是让input在视觉上不可见但仍占据可点击区域，比如设置透明度为0并且绝对定位，或者用clip属性裁剪掉，这样既保证了可访问性，也避免了兼容性坑。

<div class="upload-box">
  <input type="file" id="fileInput" class="hidden-input" />
  <button type="button" id="uploadBtn">选择文件</button>
  <span id="fileName" class="file-name">尚未选择任何文件</span>
</div>

<style>
.hidden-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.upload-box button {
  padding: 8px 20px;
  background: #409eff;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.upload-box button:hover {
  background: #66b1ff;
}
.file-name {
  margin-left: 12px;
  color: #666;
  font-size: 14px;
}
</style>

监听change事件，实时回显文件名

界面搭好之后，接下来就是关键的一步：监听input元素的change事件。当用户在文件对话框中选中文件并确认后，change事件会被触发，此时可以通过input元素DOM对象上的files属性拿到一个FileList对象，里面包含了所有选中文件的信息。每个File对象都有name、size、type、lastModified等属性，其中name就是我们需要的文件名。

把文件名写入之前预留的span标签即可完成回显。如果是单文件场景，直接取files列表的第一个元素的name属性；如果是多文件场景，可以遍历整个列表，把文件名拼接起来显示，或者显示第一个文件名加上共多少个文件的提示。下面是完整的JavaScript代码：

const fileInput = document.getElementById('fileInput');
const uploadBtn = document.getElementById('uploadBtn');
const fileNameEl = document.getElementById('fileName');

// 点击自定义按钮时触发隐藏的input
uploadBtn.addEventListener('click', function () {
  fileInput.click();
});

// 用户选中文件后触发change事件
fileInput.addEventListener('change', function () {
  const files = fileInput.files;
  if (files.length === 0) {
    fileNameEl.textContent = '尚未选择任何文件';
    return;
  }
  if (files.length === 1) {
    fileNameEl.textContent = files[0].name;
  } else {
    fileNameEl.textContent = '已选择 ' + files.length + ' 个文件：' +
      Array.from(files).map(f => f.name).join('、');
  }
});

这里有几个细节值得注意。首先，如果用户打开对话框后又取消选择，部分浏览器同样会触发change事件，此时files列表长度为0，代码里必须做好空值判断，否则直接取name会报错。其次，文件名可能很长，界面上最好配合CSS的text-overflow属性做省略号处理，或者用title属性展示完整名称，鼠标悬停时可以看到全部内容。另外，出于安全考虑，files属性返回的是File对象而不是文件的真实本地路径，name只包含文件名本身，不包含目录信息，这是浏览器的保护机制，不要试图去获取完整路径。

如果希望支持一次选择多个文件，只需要在input标签上加上multiple属性即可，对应的JavaScript逻辑上面已经做了兼容处理。

进阶扩展：限制文件类型与本地预览

实际业务中往往不只显示文件名，还希望做类型校验和内容预览。限制类型有两种手段：一是在input上使用accept属性，比如accept="image/*"表示只允许选择图片，accept=".pdf,.docx"表示只允许特定扩展名，这能在文件对话框层面过滤掉大部分不符合要求的文件；二是选中后在change事件里用JS再做一次后缀名或MIME类型校验，双重保险更可靠，因为accept属性用户是可以手动绕过的。

对于图片类文件，还可以借助FileReader接口在不上传服务器的前提下实现本地预览。FileReader的readAsDataURL方法可以把文件内容读成一个base64编码的数据地址，把它赋给img元素的src属性，页面就能立刻显示图片缩略图，用户体验会好很多。示例代码如下：

fileInput.addEventListener('change', function () {
  const file = fileInput.files[0];
  if (!file) return;

  // 校验文件类型，只允许图片
  if (!file.type.startsWith('image/')) {
    alert('请选择图片文件');
    fileInput.value = '';
    return;
  }

  fileNameEl.textContent = file.name;

  // 本地预览
  const reader = new FileReader();
  reader.onload = function (e) {
    const img = document.createElement('img');
    img.src = e.target.result;
    img.style.maxWidth = '200px';
    document.body.appendChild(img);
  };
  reader.readAsDataURL(file);
});

还有一个容易忽略的小技巧：重复选择同一个文件时，由于input的值没有变化，change事件可能不会再次触发。解决办法是在每次读取完文件后把input的value重置为空字符串，这样下次选择相同文件也能正常触发事件。如果想进一步支持拖拽上传，可以监听目标区域的dragover和drop事件，从drop事件的dataTransfer.files属性中拿到文件列表，后续处理逻辑与change事件完全一致，复用同一个处理函数即可。

文件上传自定义按钮JavaScript修改时间：2026-09-07 07:15:02