如何使用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>