使用 JQuery 的子页面中的图像预览不起作用？

Question

当用户在使用 JQuery 注册时浏览图像时，我想在 div 中预览图像。

下面是子页面名称 SignUp.aspx

<asp:Content ID="Content2" ContentPlaceHolderID="phForChildPage" runat="server">
<asp:Table runat="server" HorizontalAlign="Center" BorderColor="Yellow" BorderStyle="Dotted" BorderWidth="2">
<asp:TableRow runat="server">
                <asp:TableCell runat="server">
                    <asp:FileUpload runat="server" ID="fuUserPicture" CssClass="ui-corner-all" />
                </asp:TableCell>
                <asp:TableCell runat="server">
                        <div id="imageHolder"></div>
                </asp:TableCell>
            </asp:TableRow>
</asp:Table>
</asp:Content>

JavaScript 文件中的 JQuery 代码。

// for image preview
$(function () {
    $("#phForChildPage_fuUserPicture").on('change', function () {
        if (typeof (FileReader) != "undefined") {
            var imageHolder = $("#phForChildPage_imageHolder");
            imageHolder.empty();
            //make new instance of file reader
            var reader = new FileReader();
            reader.onload = function (e) {
                $("<img />", {
                    "src": e.target.result,
                    "class": "thumb-image",
                    "width": "200px",
                    "height": "200px"
                }).appendTo(imageHolder);
            }
            imageHolder.show();
            reader.readAsDataURL($(this)[0].files[0]);
        }
        else {
            alert("This browser does not support File Reader");
        }
    })
});

我检查了我的 JQuery 工作。一切都好。只是图像不显示在 div 中。请帮忙。

Answer 1

在您的原始代码中发现了错误。您正在使用 $('#phForChildPage_imageHolder') 访问 div，但事实是 div id 没有更改，它仍然只是“imageHolder”。

是的，我已经通过在我当地的视觉工作室复制和粘贴你的代码来确认它并尝试了这个问题。 问题在我的本地环境中也可以重现。

解决方案非常简单，正如我上面提到的，您只需使用“imageHolder”而不是“phForChildPage_imageHolder”。

更新您的 javascript 代码

$(function () {
$("#phForChildPage_fuUserPicture").on('change', function () {
    if (typeof (FileReader) != "undefined") {
        var imageHolder = $("#phForChildPage_imageHolder");
        imageHolder.empty();
        //make new instance of file reader
        var reader = new FileReader();
        reader.onload = function (e) {
            $("<img />", {
                "src": e.target.result,
                "class": "thumb-image",
                "width": "200px",
                "height": "200px"
            }).appendTo(imageHolder);
        }
        imageHolder.show();
        reader.readAsDataURL($(this)[0].files[0]);
    }
    else {
        alert("This browser does not support File Reader");
    }
})
});

与

$(function () {
$("#phForChildPage_fuUserPicture").on('change', function () {
    if (typeof (FileReader) != "undefined") {
        var imageHolder = $("#imageHolder");
        imageHolder.empty();
        //make new instance of file reader
        var reader = new FileReader();
        reader.onload = function (e) {
            $("<img />", {
                "src": e.target.result,
                "class": "thumb-image",
                "width": "200px",
                "height": "200px"
            }).appendTo(imageHolder);
        }
        imageHolder.show();
        reader.readAsDataURL($(this)[0].files[0]);
    }
    else {
        alert("This browser does not support File Reader");
    }
})
});

希望这会有所帮助。

Answer 2

我从单独的文件中删除我的 JavaScript 代码，并将代码放在子页面的 head 下，并从 asp:FileUpload 控件调用 onchange(this) 函数。

<asp:TableRow runat="server">
                <asp:TableCell runat="server">
                    <asp:FileUpload runat="server" ID="fuUserPicture" onchange="ShowImagePreview(this)" CssClass="ui-corner-all" />
                </asp:TableCell>
                <asp:TableCell runat="server">
                        <asp:Image runat="server" ID="imageHolder" Height="150px" Width="240px" />
                </asp:TableCell>
            </asp:TableRow> 

我没有使用<div id=imageHolder></div>，而是使用asp:Image 控件。

最后是 JavaScript 代码

<script type="text/javascript">
        function ShowImagePreview(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();
                reader.onload = function (e) {
                    $('#<%=imageHolder.ClientID%>').prop('src', e.target.result)
                .width(240)
                .height(150);
                };
                reader.readAsDataURL(input.files[0]);
            }
        }
    </script>

而且效果很好。但是直到现在我还不知道为什么当我将此代码放在单独的javascript文件中并使用#contentPlaceHolderId_controlId而不是#controlId时它不起作用，也不明白为什么我们使用ClientId。但它有效，我很高兴。如果有人知道上述问题的概念性答案，请发表评论。谢谢