自定义文件上传功能可用但无法显示文件名求助

你的代码核心逻辑没问题，但脚本执行时机不对，导致事件绑定失败，无法更新文件名。

问题原因 #

你的JavaScript代码写在HTML元素（#getFile、#fileName）的前面，浏览器解析到脚本时，这些DOM元素还没被加载完成，jQuery无法找到对应的元素，change事件也就绑定不上，自然不会触发文件名更新。

修复方案 #

有两种可行的修复方式：

方式1：把脚本移到HTML元素之后

<span id="fileName">No file selected</span>
<input type="file" name="file" id="getFile" style="display: none">
<a style="text-decoration: none;" onclick="document.getElementById('getFile').click()">
Browse File ...
</a>

<script>
$('#getFile').change(function(){
  $('#fileName').text($('#getFile')[0].files[0].name);
});
</script>

方式2：用$(document).ready()包裹脚本

确保DOM加载完成后再执行脚本：

<script>
$(document).ready(function(){
  $('#getFile').change(function(){
    $('#fileName').text($('#getFile')[0].files[0].name);
  });
});
</script>
 
<span id="fileName">No file selected</span>
<input type="file" name="file" id="getFile" style="display: none">
<a style="text-decoration: none;" onclick="document.getElementById('getFile').click()">
Browse File ...
</a>

额外优化建议 #

• 移除代码中多余的</font>标签（属于未闭合标签残留，会影响HTML结构）
• 添加判空逻辑，避免用户取消选择文件时报错：

$('#getFile').change(function(){
  const file = $('#getFile')[0].files[0];
  $('#fileName').text(file ? file.name : 'No file selected');
});

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