使用文件上传在 ASP.NET 中上传后的图像预览在母版页中使用时不起作用答案

【问题标题】：image preview after upload in ASP.NET using fileupload not working when used inside masterpage使用文件上传在 ASP.NET 中上传后的图像预览在母版页中使用时不起作用
【发布时间】：2015-09-06 05:16:27
【问题描述】：

这是我的代码，当我只是在 aspx 文件中使用它时，它工作得很好，但是当我将相同的代码保存在带有母版页的 aspx 文件中时，它就不起作用了。

<%@ 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>

当我在没有 Masterpage 的情况下使用时，我得到如下正确的输出

当我使用母版页时我越来越低了，不能正常来

can any body help me to fix it? what change i need to do when i use the same code with master page ?
masterpage code adding below

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

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">

<style >
#imagePreview {
    width: 250px;
    height: 250px;
    float:left;
    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>

</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">


 <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:Content>

【问题讨论】：

标签： javascript asp.net vb.net file-upload

【解决方案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>

【讨论】：