使用 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>

JQuery 代码在 JavaScript 文件中。

// 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 中未显示 Just Image。请帮忙。

Answer 1

我从单独的文件中删除了我的 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。但它有效，我很高兴。如果有人知道上述问题的概念性答案，请发表评论。谢谢

Answer 2

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

是的，我已经通过将您的代码复制并粘贴到我的本地 visual studio 来确认并尝试了这个问题。问题在我的本地环境中也可重现。

正如我上面提到的，解决方案非常简单，您只需使用 '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");
    }
})
});

希望对您有所帮助。

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

Image preview in child page using JQuery not working?

html

javascript

css

jquery

filereader