Question

这是我的代码，当我在aspx文件中使用它时，它很好，但是当我将相同的代码保存在带有母版页的aspx文件中时，它无效。

youareawesome@gmail.com

我在没有母版页的情况下使用时正确输出如下所示

当我使用母版页时我到了下面，没有正确到来

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="test2.aspx.vb" Inherits="test2" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">


<style>
#imagePreview {
    width: 250px;
    height: 250px;
    background-position: center center;
    background-size: cover;
    -webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, .3);
    display: inline-block;
}
</style>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
    <script type="text/javascript">
 $(function () {
            $("#FileUpload1").on("change", function () {
                var files = !!this.files ? this.files : [];
                if (!files.length || !window.FileReader) return;

                if (/^image/.test(files[0].type)) {
                    var reader = new FileReader();
                    reader.readAsDataURL(files[0]);

                    reader.onloadend = function () {
                        $("#imagePreview").css("background-image", "url(" + this.result + ")");

                    }
                }
            });
        });
</script>



</head>
<body>
    <form id="form1" runat="server">
    <div>
     <br />
 <br />

 <br />
 <br />
 <center>
   <fieldset style="width:35%">
   <legend>Preview Image before upload</legend>
   <table>
   <tr><td>Upload Image:</td><td>
       <asp:FileUpload ID="FileUpload1" runat="server" /><br />
       <asp:Label ID="lblmessage" runat="server"></asp:Label></td></tr>
       <tr><td></td><td><table><tr><td>
           <asp:Image ID="imagePreview" runat="server" /></td></tr></table></td></tr>
   <tr><td></td><td> </td></tr>
   </table>        

   </fieldset>
   </center>



    </div>
    </form>
</body>
</html>

Answer 1

您未正确使用ContentPlaceholder。它应该在您的母版页中保留为空，然后填写在内容页面上。

母版页：

<%@ Page Title="" Language="VB" MasterPageFile="~/Receptionist.master" AutoEventWireup="false" CodeFile="test.aspx.vb" Inherits="test" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">

<asp:ContentPlaceHolder ID="head" Runat="server">
</asp:ContentPlaceHolder>

<style>
#imagePreview {
    width: 250px;
    height: 250px;
    background-position: center center;
    background-size: cover;
    -webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, .3);
    display: inline-block;
}
</style>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
    <script type="text/javascript">
 $(function () {
            $("#FileUpload1").on("change", function () {
                var files = !!this.files ? this.files : [];
                if (!files.length || !window.FileReader) return;

                if (/^image/.test(files[0].type)) {
                    var reader = new FileReader();
                    reader.readAsDataURL(files[0]);

                    reader.onloadend = function () {
                        $("#imagePreview").css("background-image", "url(" + this.result + ")");

                    }
                }
            });
        });
</script>

</head>
<body>

 <br />
 <br />
 <center>
   <fieldset style="width:35%">
   <legend>Preview Image before upload</legend>
   <table>
   <tr><td>Upload Image:</td><td>
       <asp:FileUpload ID="FileUpload1" runat="server" /><br />
       <asp:Label ID="lblmessage" runat="server"></asp:Label></td></tr>
       <tr><td></td><td><table><tr><td>
           <asp:Image ID="imagePreview" runat="server" /></td></tr></table></td></tr>
   <tr><td></td><td> </td></tr>
   </table>        

   </fieldset>
   </center>

   <asp:ContentPlaceHolder ID="MainContent" Runat="server"></asp:ContentPlaceHolder>
</body>
</html>

子页面：

<%@ Page Language="VB" MasterPageFile="~/Receptionist.master" AutoEventWireup="false" CodeFile="test2.aspx.vb" Inherits="test2" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
// Page specific content
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="server">
// Page specific content
</asp:Content>

在ASP.NET中上传后使用fileupload在masterpage中使用时无法正常工作的图像预览

1 个答案: