Image preview in child page using JQuery not working?

Question

I want to preview image in a div when user browse the image while sign up using JQuery.

Below is child page names 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 code in JavaScript file.

// 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");
        }
    })
});

I check my JQuery works. All fine. Just Image is not shown in div. Please help.

Answer 1

Found the mistake in your original code. You are using $('#phForChildPage_imageHolder') to access div but the fact is div id is not changed it is still "imageHolder" only.

Yes I have confirmed it by coping and pasting your code on my local visual studio and tried this issue. Issue was reproducible on my local environment as well.

Solution was very simple as I mention above you have to just use 'imageHolder' instead of 'phForChildPage_imageHolder'.

Update your javascript code

$(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");
    }
})
});

with

$(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");
    }
})
});

Hope this helps.

Answer 2

I delete my JavaScript code from separate file and put the code in child page under head and call onchange(this) function from asp:FileUpload control.

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

And instead of using <div id=imageHolder></div> I used asp:Image control.

And finally JavaScript code is

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

And it works fine. But till yet I don't know why it doesn't work when I put this code in separate javascript file and use #contentPlaceHolderId_controlId instead of #controlId also don't understand why we use ClientId . But it works and I am happy. If some one know conceptual answer of above questions please comment. Thanks