将文件输入框标签文本修改为文件名时遇类型错误问题排查

嘿，我来帮你搞定这个问题！你遇到的这个错误，本质是在处理文件选择事件时，错误地访问了一个未定义对象的files属性。结合你的HTML结构和需求，我给你整理了完整的修正方案：

首先，你的HTML结构是没问题的，先确认一下：

<div class="custom-file">
  <label class="custom-file-label text-left" for="customFile" id="file">Choose file</label>
  <input type="file" class="custom-file-input" id="customFile">
</div>

错误原因 #

最可能的情况是你在change事件处理函数里，把jQuery对象当成了原生DOM元素来使用——比如直接写$(this).files，但jQuery对象本身没有files属性，这个属性是属于原生<input type="file">元素的。

修正后的完整jQuery代码 #

// 确保DOM加载完成后再执行代码
$(document).ready(function() {
  $('#customFile').change(function() {
    // 事件里的this是原生input元素，直接访问它的files属性
    if (this.files && this.files.length > 0) {
      // 获取选中的文件名
      const fileName = this.files[0].name;
      // 更新标签文本
      $('#file').text(fileName);
    } else {
      // 如果用户取消选择，恢复默认文本
      $('#file').text('Choose file');
    }
  });
});

几个关键细节 #

• 事件处理函数里的this是原生DOM元素，所以可以直接用this.files获取文件列表；如果一定要用jQuery方法操作，需要先把它转成jQuery对象（比如$(this)），但访问files时要转回原生元素，比如$(this)[0].files。
• 加个this.files && this.files.length > 0的判断，是为了避免用户打开文件选择框后又取消选择的情况，防止再次触发类似的错误。
• 一定要把代码放在$(document).ready()里，或者直接写在HTML的末尾（确保DOM元素已经加载完成），否则可能会出现找不到#customFile元素的情况。

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