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是否有效。一切都很好。 Just Image未显示在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代码，并将代码放在子页面下，并从onchange(this)控件调用asp:FileUpload函数。

<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 。但它有效，我很高兴。如果有人知道上述问题的概念性答案，请发表评论。感谢

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

2 个答案: