How to preview an image before it is uploaded by java script?

We want to auto preview an image before it is uploaded. The preview action should be executed all in the browser using java script. Also it works before Save.

So here is our java script code:

 <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>

    <script type="text/javascript">       

        function ShowImagePreview1(input) {

            if (input.files && input.files[0]) {

                var reader = new FileReader();

                reader.onload = function (e) {

                    $('#<%=Image1.ClientID%>').prop('src', e.target.result)

                        .width(150)

                        .height(150);

                };

                reader.readAsDataURL(input.files[0]);

            }

        }       

    </script>

HTML code:

 <div class="container">

            <asp:Image ID="Image1" runat="server" Width="150" Height="150"  />

            <br />   <br />

            <asp:FileUpload ID="FileUpload1" CssClass="uploader" runat="server" onchange="ShowImagePreview1(this);" />      

        </div>

Finally it's look like below: