How to send a large image or base64 string using ajax?

Question

I have a file for jpeg images. It generates a base64 string on change and puts it in another invisible text input. Then I press the button and the string is sent to the server using ajax POST.
It works great with images under 300-400 kb, but when I try to upload a large image that is 500 KB + in size, the base64 string is limited to 524288 characters.

<input type="file" id="imgUp" accept=".jpg" display: none;"> 
<input type="text" id="imgTempUrl"/>

<script type="text/javascript">
    $(function(){
    //When new file/image is loaded, update temporary input with new base64 string
        $('#imgUp').change(function(){
            imgUp = document.getElementById('imgUp');
            if(imgUp.files && imgUp.files[0]){
                var reader = new FileReader();
                reader.onload = function(e){
                    $('#imgTempUrl').val(e.target.result);
                };
                reader.readAsDataURL(imgUp.files[0]);
            }
        });
    });
</script>

My question is:
is there a way to remove the character limit of my input or compress / resize an image before converting it to base64 string?
Thank you in advance!

Answer 1

: , "src" base64: .

<input type="file" id="imgUp" accept=".jpg">     
<img src="" id="imgTempUrl" style="" display: none;"> 

<script type="text/javascript">
    $(function(){
    //When new file/image is loaded, update temporary input with new base64 string
        $('#imgUp').change(function(){
            imgUp = document.getElementById('imgUp');
            if(imgUp.files && imgUp.files[0]){
                var reader = new FileReader();
                reader.onload = function(e){
                    $('#imgTempUrl').attr("src",e.target.result);
                };
                reader.readAsDataURL(imgUp.files[0]);
            }
        });
    });
</script>