如何使用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字符串之前，去除输入的字符限制或压缩/调整大小？
预先感谢你！

- Eduard Climov

---

请考虑使用FormData。 - Roland Starke

问题更可能与服务器上的请求传输限制有关。例如，默认情况下，IIS仅限制几兆字节。要一次性发送那么多数据，很可能需要您要求托管公司修改服务器设置以允许此操作。 - Rory McCrossan

服务器允许上传约40MB的文件。问题在于文本输入限制为524288个字符。 - Eduard Climov

那么问题就在这里了，500 > 40。正如我所提到的，您需要向托管公司发出请求以增加限制 - 假设您没有直接访问服务器的权限。文本限制问题是次要的，但您应该真正使用 FormData。 - Rory McCrossan

我会尝试。谢谢。 - Eduard Climov

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>

- Eduard Climov

---

好的，但是你怎么上传这张图片？ - Vincent Guyard