Display uploaded Images in Image control using ASP.Net FileUpload control

There is something that surprises me when uploading two different images with two FileUpload controls. Is it that Fileupload cannot display uploaded images of two different image controls on a web page? I have two image controls and two FileUpload controls. Two different images will be displayed in each image control. For example: When I upload and image using FileUpload1, the uploaded image will be displayed in Image1, and when I upload another image using FileUpload2, then the image will be displayed in Image2 But when I try to do that, only Image1 displays an image. Image2 does not display any image.

HTML

<style type="text/css">
    .frontCard { height: 375px; width: 250px; position: relative; border-radius: 10px; border: 1px solid #e6ebe0; background-color: #fff; }

    .topCard { height: 30%; width: 100%; position: relative; z-index: 5; border-top-left-radius: 10px; border-top-right-radius: 10px; line-height: normal; }

    .topCard img { height: 100px; width: 100px; border-radius: 10px; position: absolute; top: 80px; left: 75px; }

    .bott .holders { text-align: left; position: relative; top: 100px; float: left; left: 0px; }

    #Image9 { border: 1px solid #e6ebe0; height: 30px; width: 50px; }

    .holders img { width: 50px; margin: 5px; float: left; position: relative; left: 5px; }

    .bott { height: 70%; width: 100%; background-color: transparent; position: absolute; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; }
</style>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
    <contenttemplate>
            <div class="col-sm-10" style="text-align: center;">
                    <div class="frontCard" runat="server" id="frontCard">
                        <div class="topCard">
                            <asp:Image ID="Image1" runat="server" CssClass="img" />
                            <br />
                        </div>
                        <div class="bott">
                            <div class="holders">
                                <p>signature</p>
                                <asp:Image AlternateText="sign" ID="Image2" runat="server" Height="30" />
                            </div>
                        </div>
                    </div>
                    <asp:Label ID="Label17" runat="server" Style="color: #999;">Photo</asp:Label>
                    <br />
                    <asp:FileUpload ID="FileUpload1" runat="server" />
                    <br />
                    <asp:Label ID="Label18" runat="server" Style="color: #999;">Signature</asp:Label>
                    <br />
                    <asp:FileUpload ID="FileUpload2" runat="server" />
                    <br />
                </div>
    </contenttemplate>
</asp:UpdatePanel>

<script type="text/javascript">
    function pageLoad() {
        $(function () {
            var fileUpload = $("[id*=FileUpload1]");
            var img = $("[id*=Image1]");
            img.click(function () { fileUpload.click(); });
            fileUpload.change(function () {
                var reader = new FileReader();
                reader.onload = function (e) {
                    $("[id*=Image1]").attr("src", e.target.result);
                }
                reader.readAsDataURL($(this)[0].files[0]);
            });
        });
    }
</script>
<script type="text/javascript">
    function Loadpage() {
        $(function () {
            var fileUpload = $("[id*=FileUpload2]");
            var img = $("[id*=Image2]");
            img.click(function () { fileUpload.click(); });
            fileUpload.change(function () {
                var reader = new FileReader();
                reader.onload = function (e) {
                    $("[id*=Image2]").attr("src", e.target.result);
                }
                reader.readAsDataURL($(this)[0].files[0]);
            });
        });
    }
</script>