点击ImageButton触发FileUpload上传失效，onchange无响应问题求助

我需要实现点击图片触发上传、上传后预览图片的功能，用ImageButton点击时调用FileUpload控件，但选完文件后FileUpload仍显示「No file chosen」，onchange事件也没触发。调试发现直接点击FileUpload能正常显示文件名，但通过JS触发就不行。

现有代码 #

页面JS代码 #

function chooseFile() {
    $("#FileUpload1").click();
}
function fileChanged() {
    // 处理上传后的逻辑
}

ASP.NET控件代码 #

<asp:FileUpload ID="FileUpload1" runat="server" onchange="fileChanged()"/>
<asp:ImageButton ID="ImageButton1" runat="server" OnClientClick="chooseFile()" ImageUrl="images/placeholder.png" />

尝试过的操作：设置ClientIdMode='static' #

修改后的JS代码：

function chooseFile() {
    $("#<%=FileUpload1.ClientID%>").click());
}

渲染后的前端代码：

function chooseFile() {
    $("#FileUpload1").click());
}

控件渲染结果：

<input type="file" name="FileUpload1" id="FileUpload1" onchange="fileChanged()" />
<input type="image" name="ImageButton1" id="ImageButton1" src="images/placeholder.png" onclick="chooseFile();" />

问题原因&解决方法 #

1. ImageButton的默认回发行为是核心问题 #

ASP.NET的ImageButton本质是表单提交按钮，点击后会自动触发页面回发，导致FileUpload控件的状态被重置——刚选的文件还没处理就被页面刷新清空了，所以显示「No file chosen」。

2. 修复步骤 #

（1）阻止ImageButton的默认回发

在OnClientClick末尾添加return false;，阻止页面回发：

<asp:ImageButton ID="ImageButton1" runat="server" OnClientClick="chooseFile(); return false;" ImageUrl="images/placeholder.png" />

（2）修复JS语法错误

编辑1中的代码多了一个冗余括号，click()后面的括号要删掉：

function chooseFile() {
    $("#<%=FileUpload1.ClientID%>").click();
}

（3）可选：实现图片预览

如果要在选完文件后展示图片，完善fileChanged()函数：

function fileChanged() {
    const fileInput = document.getElementById("FileUpload1");
    const file = fileInput.files[0];
    if (file) {
        const reader = new FileReader();
        reader.onload = function(e) {
            // 假设页面有id为previewImg的img标签用于预览
            document.getElementById("previewImg").src = e.target.result;
        };
        reader.readAsDataURL(file);
    }
}

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