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

最新推荐文章于 2023-12-25 01:49:58 发布

原创最新推荐文章于 2023-12-25 01:49:58 发布 · 758 阅读

0 ·

CC 4.0 BY-SA版权

柳暗花明专栏收录该内容

1 篇文章

订阅专栏

在.NET中使用模板页进行文件上传时遇到JavaScript无法通过getElementById获取FileUpload控件的问题。经过排查，发现控件ID在模板页中被拼接为"ContentPlaceHolder1_uploadFile"，而不是预期的"uploadFile"。通过查看源代码并修改JS为`getElementById("ContentPlaceHolder1_uploadFile")`，成功解决了控件获取为null的难题，兼容Chrome、Firefox和IE浏览器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

写一个简单的文件上传，需要在前端使用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都通过。