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

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

<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字符串之前调整图像？
预先感谢您！

来源

2016-08-15 Eduard Climov

考虑[FORMDATA（https://developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects） –

问题是更可能的请求传输限制做服务器。例如，默认情况下，IIS仅限于几兆字节。要一次发送大量数据，可能需要您向托管公司修改服务器设置以允许它。 –

服务器允许上传大约40mb。问题是文本输入被限制为524288个字符。 –

我发现简单的解决方案：我使用隐藏的图像，而不是文本输入，然后使用它的“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>

来源

2016-08-15 11:33:22

好的，但您如何上传此图片？ –

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

回答

相关问题