Prevent user entering large image

See more:

C#

Javascript

I want to prevent user from uploading images that's too large.
I got a large Image for this site
https://www.learningcontainer.com/sample-jpeg-file-download-for-testing/
After I put the large image in the file uploader any button I click the page breaks.
I added a breakpoint at the beginning of the upload button put the pages crushes before it gets to that point.
thus preventing me from doing server side checking.
Any help will be greatly appreciated


What I have tried:

FileUpload ID="FileUpload1" runat="server" CssClass="btn btn-primary" onchange="ShowImagePreview(this);"/>  
                    <asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" ForeColor="Red" ErrorMessage="This file type is not allowed"
    ControlToValidate="FileUpload1" ValidationExpression="^(([a-zA-Z]:)|(\\{2}\w+)\$?)(\\(\w[\w].*))+(.jpg|.JPG|.gif|.GIF|.jpeg|.png|.PNG|.bmp|.BMP)$">
    </asp:RegularExpressionValidator>

 <script type="text/javascript" src="../super/JsCode.js"></script>
    <script src="//code.jquery.com/jquery-1.11.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        function ShowImagePreview(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();
                reader.onload = function (e) {
                    $('#<%=ImgPrv.ClientID%>').prop('src', e.target.result)
                        .width(70)
                        .height(70);
                };
                reader.readAsDataURL(input.files[0]);
            }
        }
    </script>