添加母版页后 JavaScript 不工作

标签 javascript asp.net master-pages

最初我可以在选择图像后预览图像。添加母版页后,JavaScript 不再工作。

这是我的母版页

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site1.master.cs" Inherits="Testing.Site1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>     
<asp:ContentPlaceHolder ID="head" runat="server">       
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div>
    <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
    </asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>

这是我的内容页面

<%@ Page Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true" CodeBehind="Testing1.aspx.cs" Inherits="Testing.Testing1" %>
<asp:Content ID="Content2" ContentPlaceHolderID="head" runat="server">
<script type="text/javascript">
    function imagepreview(input)
    {
        if (input.files && input.files[0]) {
            var fildr = new FileReader();
            fildr.onload = function (e) {
                $('#Image1').attr('src', e.target.result);
            };
            fildr.readAsDataURL(input.files[0]);
        }
    }
</script>  
</asp:Content>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">  

    <asp:FileUpload ID="FileUpload1" runat="server" />
    <br />
    <asp:Image ID="Image1" runat="server" height="100" Width="100" />
    <br />
    <br />
    <asp:Button ID="btnUpload" runat="server" Text="Upload" OnClick="btnUpload_Click" />
    <br />
    <br />
    <asp:TextBox ID="tbRetrieve" runat="server"></asp:TextBox>
    <br />
    <asp:Button ID="btnRetrieve" runat="server" Text="Retrieve" OnClick="btnRetrieve_Click" />
    <br />
    <asp:Image ID="Image2" runat="server" />
    <br />
    <asp:Label ID="lblMessage" runat="server"></asp:Label>
    <br />
    <br />
    </asp:Content>

这是我的代码

protected void Page_Load(object sender, EventArgs e)
    {
        FileUpload1.Attributes["onchange"] = "imagepreview(this)";
        if (!IsPostBack)
        {
            lblMessage.Visible = false;
        }
    }

那么问题出在哪里?

最佳答案

添加母版页时,查找控件 ID 的代码将发生更改,您必须像这样替换代码。

<script type="text/javascript">
function imagepreview(input)
{
    if (input.files && input.files[0]) {
        var fildr = new FileReader();
        fildr.onload = function (e) {
            $('#<%=Image1.ClientID%>').attr('src', e.target.result);
        };
        fildr.readAsDataURL(input.files[0]);
    }
}

关于添加母版页后 JavaScript 不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42291122/

相关文章:

javascript - 使用 RegEx 格式化 InnerHtml 文本无法正常工作

javascript - 将参数传递给 Angular

c# - Entity Framework

asp.net - 哪个事件首先调用?母版页 Page_Load 或内容页 Page_Load

java - 生活游戏中的蟾蜍图案

Javascript正则表达式难倒了

html - ASP.NET 主页导航当前页面 Css

c# - 如何从内容页检索母版页中的控件

c# - 警告 NETSDK1071 对 'Microsoft.AspNetCore.App' 的 PackageReference 指定了 `2.1.6` 的版本

c# - 如何处理/取消同一用户 asp.net 的并发请求