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

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

本文关键字：字符串 使用 ajax base64 何发送 图像      更新时间：2023-09-26

我有一个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字符串之前删除输入字符的限制或压缩/调整图像的大小?
提前感谢!

我找到了简单的解决方案:我使用隐藏图像而不是文本输入，然后使用它的"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>
相关文章：