.net 使用模板页，JS使用document.getElementById("")得到null的解决办法

关注

原创最新推荐文章于 2026-08-30 15:24:40 发布 782 阅读 AI 写同款· GEO 优化 ›

写一个简单的文件上传，需要在前端使用js判断类型和大小等等（安全考虑，虽然这些都可以修改，这是后话），原本以为两三行的代码，五分钟可以解决，没想到遇到了问题。折腾了很久，后面查看网页源码才发现问题出现在控件的ID上。

楼主使用模板页，前端大致如下：

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<form id="Form" runat="server">
<asp:FileUpload ID="uploadFile" runat="server" /><asp:Label ID="tips" runat="server" Text="(支持gif,jpg,png,bmp格式)"></asp:Label><br/>
<asp:Button ID="Upload" runat="server" OnClientClick="return CheckWorkFile();" onclick="Upload_Click" Text="点击上传" />
</form>

A.在JS中var obj = document.getElementById("uploadFile");得到obj是null，做了如下尝试：

1）不适用.net的控件，换成普通html input标签，JS可以获取具体的对象；

2）不适用模板页，在普通页面中使用.net的控件，JS也可以获取具体的对象；

以上两点基本可以断定是使用模板页导致的。

B.然后借鉴网友智慧，做了以下尝试：

1）使用<%=uploadFile.ClientID%>，即var obj = document.getElementById("<%=uploadFile.ClientID%>")，虽然很多网友成功验证了，但是我仍然得到null；

2）更换JS的位置，的确html dom加载和JS执行会有先后次序。不幸，我多次尝试，依旧面对null；

C.我的解决之道：

查看网页源代码之后，发现 <asp:FileUpload ID="uploadFile" runat="server" />ID不是“uploadFile”，而是“ContentPlaceHolder1_uploadFile“，原来是拼接过来的，

JS改为var obj = document.getElementById("ContentPlaceHolder1_uploadFile")终于摆脱null。

测试了chrome Firefox和IE都通过。

收录于