Как отправить большое изображение или строку base64 с помощью ajax?

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>