如何用<input type="file"/>选中的文件名修改<label>内文本？代码失效求解

我来帮你排查问题根源，以及给出可行的修复方案：

问题核心原因 #

你遇到的代码失效问题，主要是脚本执行时机不对：你的jQuery代码写在<head>标签里，这时候页面的DOM元素还没加载完成，$('#files')根本找不到对应的input元素，自然绑定的change事件不会触发。另外，你同时引入了两个不同版本的jQuery（本地1.12.4和CDN的2.1.1），这可能会引发潜在的版本冲突问题，建议只保留其中一个即可。

修复方案 #

把你的脚本代码移到HTML页面的末尾（</body>标签之前），确保DOM元素全部加载完成后再执行事件绑定；同时移除重复的jQuery引用。

修正后的完整代码 #

<!DOCTYPE html> 
<html> 
<head> 
    <!-- 只保留一个jQuery引用即可，这里以CDN版本为例 -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
</head> 
<body> 
    <div class="upload_firmware_container"> 
        Please upload the provided <span style="color:#e11422">firmware.bin</span> file and/or <span style="color:#e11422">spiffs.bin</span> file.<br/> 
        <!-- action="/doUpdate" --> 
        <form method="POST" enctype="multipart/form-data"> 
            <label class="file_input_label" for="files">Browse files</label> 
            <input id="files" type="file" name="update"> 
            <input class="upload_button" type="submit" name="getUpdate" value="Update"> 
        </form> 
    </div>

    <!-- 脚本移至此处，确保DOM已完全加载 -->
    <script> 
        $('#files').on("change",function() { 
            console.log("change fired"); 
            var file = $('#files')[0].files[0].name; 
            console.log(file); 
            $(this).prev('label').text(file); 
        }); 
    </script>
</body> 
</html>

关键改动说明 #

1. 调整脚本位置：将事件绑定代码放在页面末尾，此时#files元素已经存在于DOM中，jQuery能成功选中并绑定事件。
2. 移除重复jQuery：只保留一个版本的jQuery，避免版本冲突导致的未知问题。
3. 简化冗余代码：你之前克隆了label元素但未实际使用，因此删除了var i = $(this).prev('label').clone();这行冗余代码，减少不必要的操作。

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