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

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

         写一个简单的文件上传,需要在前端使用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();" οnclick="Upload_Click" Text="点击上传" />
    </form>

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

1)

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在Vue中使用bpmn-js可以通过以下几个步骤实现: 1. 首先,安装bpmn-js的依赖包。你可以使用npm或者yarn来进行安装,具体安装命令如下: ``` npm install bpmn-js ``` 或者 ``` yarn add bpmn-js ``` 2. 在Vue组件中引入bpmn-js的库文件。在你需要使用bpmn-js的组件中,可以使用import语句引入bpmn-js的库文件,具体代码如下: ``` import BpmnViewer from 'bpmn-js'; ``` 3. 创建一个容器来展示bpmn图。在你的Vue组件模板中,创建一个div元素作为容器来展示bpmn图,例如: ``` <div id="bpmn-container"></div> ``` 4. 在Vue组件的mounted钩子函数中初始化bpmn-js。在Vue组件的mounted钩子函数中,可以使用bpmn-js的构造函数来初始化bpmn-js,并将其绑定到之前创建的容器上,具体代码如下: ``` mounted() { const container = document.getElementById('bpmn-container'); const viewer = new BpmnViewer({ container }); // 加载和显示bpmn图的代码 } ``` 5. 加载和显示bpmn图。在初始化bpmn-js之后,你可以使用load方法加载和显示一个bpmn图。load方法接受一个bpmn图的XML字符串作为参数,具体代码如下: ``` viewer.importXML(/* bpmn图的XML字符串 */); ``` 6. 最后,你可以根据需要对bpmn图进行进一步的操作和处理,比如增加交互事件或者自定义样式等。 需要注意的是,上述代码只是一个示例,实际使用bpmn-js可能还需要更多的配置和处理。你可以根据具体的需求进行进一步的学习和开发。 引用: 'Id': '编号', 'Name': '名称', 'General': '常规', 'Details': '详情', 'Message Name': '消息名称', 'Message': '消息', 'Initiator': '创建者', 'Asynchronous continuations': '持续异步', 'Asynchronous before': '异步前', 'Asynchronous after': '异步后', 'Job configuration': '工作配置', 'Exclusive': '排除', 'Job Priority': '工作优先级', 'Retry Time Cycle': '重试时间周期', 'Documentation': '文档', 'Element Documentation': '元素文档', 'History Configuration': '历史配置', 'History Time To Live': '历史的生存时间', 'Forms': '表单',<span class="em">1</span> #### 引用[.reference_title] - *1* [bpmn-js在vue中的基本使用](https://blog.csdn.net/qq_43519131/article/details/127985956)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值