如何使用ASP.NET和C#获取asp:FileUpload的文件名并在Label控件中显示

问题原因 #

你的代码存在4个问题导致无法生效：

• 服务器端控件设置Visible="false"时，该控件不会被渲染到前端HTML页面中，JS无法获取到对应元素
• ASP.NET 服务器控件默认渲染到前端时ID会自动变更，直接按你定义的ID用选择器匹配不到元素
• jQuery对象没有innerText属性，操作元素文本需要调用.text()方法，且你没有写赋值逻辑，也没有触发Label显示的操作
• 代码存在语法错误，change事件的回调函数括号配对错误

修正后代码 #

控件部分

<!-- 加ClientIDMode="Static"保证前端ID和定义的ID一致，用style控制隐藏而非服务器端Visible属性 -->
<asp:FileUpload ID="fileUpload" runat="server" ClientIDMode="Static" /><br />
<asp:Label ID="labelsuccess" runat="server" style="display:none;"></asp:Label>

JS部分

$(document).ready(function () {
    $('#fileUpload').change(function () {
        var fullPath = $(this).val();
        // 去除浏览器自动添加的fakepath前缀，提取真实文件名
        var fileName = fullPath.replace(/^.*[\\\/]/, '');
        // 赋值提示文本并显示Label
        $('#labelsuccess').text(`已选中文件：${fileName}`).show();
    });
});

补充说明 #

如果你不想给控件加ClientIDMode="Static"，也可以将JS里的选择器替换为$('#<%= fileUpload.ClientID %>')和$('#<%= labelsuccess.ClientID %>')，同样可以正确匹配到前端渲染后的元素。

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