如何用jQuery修改Bootstrap文件输入框"No file chosen"为指定文件名

原生<input type="file">文件上传控件受浏览器安全策略严格限制：

• 控件的value属性为只读状态，任何通过JS/jQuery直接给它赋值文件路径、文件名的操作（比如你写的$('#imgInp').val('abcd.jpg')）都会被浏览器直接拦截，完全不生效。
• 控件默认显示的"No file chosen"是浏览器内置渲染的文案，没有开放官方API供开发者直接修改。

没有办法直接修改原生控件的内置显示文本，通用解决方案是隐藏原生文件输入框，自定义DOM模拟上传控件的展示区域，你可以完全控制这个自定义区域显示的文件名，具体实现代码如下：

1. HTML结构 #

<div class="custom-file-container">
  <!-- 原生文件输入框不要用display:none隐藏，会丢失键盘可访问性，用样式移出可视区域即可 -->
  <input id="imgInp" type="file" accept=".png,.jpg,.jpeg" name="img" required class="native-file-input">
  <label for="imgInp" class="select-btn">选择图片</label>
  <!-- 专门用来显示文件名的元素，想显示什么内容直接改这个元素的文本就行 -->
  <span class="filename-display"></span>
</div>

2. CSS样式 #

.native-file-input {
  position: absolute;
  left: -9999px;
  opacity: 0;
}
.custom-file-container {
  display: flex;
  align-items: center;
  gap: 8px;
}
.select-btn {
  padding: 6px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #f5f5f5;
  cursor: pointer;
  margin: 0;
}
.filename-display {
  color: #666;
}

3. JS逻辑 #

// 页面初始化时，直接给文件名展示元素设置你要显示的默认文件名即可
$('.filename-display').text('abcd.jpg');

// 用户手动选择文件后，自动更新显示真实选中的文件名
$('#imgInp').on('change', function() {
  const selectedFile = this.files[0];
  $('.filename-display').text(selectedFile ? selectedFile.name : 'abcd.jpg');
});

注意：上述方式只是修改前端展示的文案，并没有真正给原生文件输入框绑定对应文件。如果要提交文件，必须由用户手动触发选择操作；现代浏览器也支持通过构造FileList对象给input绑定文件，但兼容性有限，非必要不推荐使用。

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