如何使用ajax发送大图像或其base64字符串？

Question

我有一个jpeg图像的文件输入。 它会在更改时生成base64字符串并将其放入其他不可见的文本输入中。 然后我按下按钮，使用ajax POST将字符串发送到服务器。
它适用于300-400kb以下的图片，但是当我尝试上传500kb +大小的大图片时，base64字符串限制为524288个字符。

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

我的问题是：
有没有办法我可以删除我的输入字符的限制或压缩/调整大小图像，然后转换为base64字符串？
先感谢您！

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>