简体   繁体   中英

How to send large image or its base64 string, using ajax?

I have a file input for jpeg images. It generates base64 string on change and puts it into other invisible text input. Then I press button and the string is sent to server using ajax POST.
It works fine with pictures under 300-400kb, but when I try to upload big image with like 500kb+ size, 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 I can remove the limit of characters of my input or compress/resize image before its transformation to base64 string?
Thank you in advance!

I found easy solution: I use hidden image instead of text input and then use its "src" attribute as my base64 string: it's not limited and works with very large files.

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM