ASP.NET按钮OnClick事件无法用JS触发

最新推荐文章于 2023-04-09 21:01:38 发布

翩跹星子

最新推荐文章于 2023-04-09 21:01:38 发布

阅读量1.9k

点赞数 1

分类专栏： .Net / .Net Core 文章标签： javascript ASP.NET

本文链接：https://blog.csdn.net/qq_24470501/article/details/126221970

版权

.Net / .Net Core 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

要求：点击FileUpload控件上传图片之后，将图片显示在Image上，由于FileUpload没有选择图片后的事件，所以就给FileUpload加一个onchange事件，通过它来在JS中触发一个Button的点击事件，再在这个点击事件中处理显示图片的问题，在这里遇到两个问题：

问题1：按钮的OnClick事件无法用JS触发；

刚开始使用 var obj = window.document.getElementById("btnSelectedFile") ，alert一直返回空值，后来给Button加上Name属性后改为：
var obj = window.document.getElementsByTagName("SelectedFile")
终于拿到Button对象，但是使用无法调用Button的OnClick事件，摸索好久终于解决：

解决办法：给按钮加上ClientIDMode="Static"属性

aspx代码：

<span style="display: none">
	<asp:Button ID="btnSelectedFile" ClientIDMode="Static" runat="server" OnClick="btnSelectedFile_Click"/>
</span>
<asp:Image runat="server" ID="imageIcon"/>
<asp:FileUpload ID="FileUploadImg" runat="server" onchange ="SelectImg()"/>

JS代码：

<script type="text/javascript">
	function SelectImg() {
		var obj = window.document.getElementById("btnSelectedFile");
		//alert(obj);
		obj.click();
	}
</script>

原因：在浏览器上，Button的ID会改变，所以使用getElementById拿不到对象, alert返回null，ClientIDMode="Static"就是设置它的ID不变，这样就可以调用Button的OnClick事件；

问题2：在后台拿到了FileUpload所选图片的绝对路径后，将它赋值给Image控件，但Image始终无法显示图片；

原因：浏览器没有权限读取用户电脑磁盘数据；

解决办法：先将图片保存到项目临时目录下，然后将这个临时目录的路径赋值给Image控件即可；

string fileName = Path.GetFileName(FileUploadImg.PostedFile.FileName);
if (!Directory.Exists(this.Server.MapPath("Temp/")))
{
	Directory.CreateDirectory(this.Server.MapPath("Temp/"));
}
string serverPath = this.Server.MapPath("Temp/") + fileName;
this.FileUploadImg.PostedFile.SaveAs(serverPath);
imageIcon.ImageUrl = "Temp/" + fileName;

记得加上处理删除临时图片的问题。