如何使用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字符串？

回答

相關問題