如何通過ajax發送大的base64圖像字符串？

我在通過ajax發送base64圖像字符串時遇到問題。當我上傳小圖片時，它工作正常，但是當我嘗試上傳大圖時，它會產生一個錯誤。其實我正在創建一個在線可定製的打印Web應用程序。因此，用戶可以選擇添加文字&圖像。我想要的是，當用戶按提交buttom時，html頁面的body標籤內的整個數據應該通過ajax傳遞到我的sql服務器數據庫。如何通過ajax發送大的base64圖像字符串？

這裏是我的標記

<div id="body_content"> 
        <div class="leftsidebar"> 
         <div class="det"> 
          <h2> 
           <b>Please Add Default Details</b></h2> 
          <ul id="sortable"> 
           <li class="sorts"> 
            <input size="29" type='file' style='opacity: 0; position: absolute' id="imgInp" /> 
            <input id='img1' style="width: 270px" class='img1' value='Choose Background Image' 
             type='text' /></li> 
          </ul> 
         </div> 
        </div> 
        <div class="rightsidebar"> 
         <div id="settings_pane" style="display: none"> 
          <select id="fonts_list" name="fonts_list"> 
           <option>Arial</option> 
           <option>Segoe UI</option> 
           <option>Lithos Pro</option> 
           <option>Edo</option> 
           <option>Tahoma</option> 
           <option>Gallete</option> 
           <option>Adventure</option> 
           <option>AvQest</option> 
           <option>Bead Chain</option> 
           <option>Miami</option> 



          </select> 
          <select id="font_size" name="font_size"> 
           <option>10px</option> 
           <option>15px</option> 
           <option>20px</option> 
           <option>25px</option> 
           <option>30px</option> 
           <option>35px</option> 
          </select> 
          <input id="color_picker" type="button" value="" /> 
          <input type="button" class="button" value="Add Text" id="add_text" /> 
          <input type="button" class="button" value="Add Image" id="add_image" /> 
          <input type="button" class="button" value="Send To Back" id="bck" /> 
          <input type="button" class="button" value="Bring To Front" id="frnt" /> 
         </div> 
         <div id="azaab"> 
          <div id="cont"> 
           <img alt="" id="safeZone" src="../Images/backgrounddef.jpg" /> 
          </div> 
         </div> 
        </div> 
       </div>

這裏是我的jQuery

//Image Upload Code 
function readURL(input) { 

      if (input.files && input.files[0]) { 
       var reader = new FileReader(); 

       reader.onload = function (e) { 

        $('#safeZone').attr('src', e.target.result); 
       } 

       reader.readAsDataURL(input.files[0]); 

      } 
     } 

     $("#imgInp").change(function() { 

      readURL(this); 
     }); 



//Sending Content Through Ajax 
function savemydata() { 

      $.ajax({ 
       type: "POST", 
       url: "addProductDesigns.aspx/SaveData", 
       data: "{'text': '" + $("#body_content").html() + "'}", 
       contentType: "application/json; charset=utf-8", 
       dataType: "json", 
       success: Success, 
       failure: function (response) { 
        alert(response.d); 
       } 
      }); 
     } 

     function Success(response) { 
      alert(response.d); 
     }

這裏是我的背後

[WebMethod()] 
public static string SaveData(string text) 
{ 
    try 
    { 

     string connectionString = "server=(localhost); Initial Catalog=databaseName; uid=username; password=password"; 
     SqlConnection cnn = new SqlConnection(connectionString); 
     SqlCommand cmd; 
     cmd = cnn.CreateCommand(); 
     cnn.Open(); 
     cmd = cnn.CreateCommand(); 
     cmd.CommandText = "insert into tempCheck values('" + text.Trim() + "')"; 
     cmd.ExecuteNonQuery(); 
     cnn.Close(); 

     return "Saved Successfully"; 
    } 
    catch 
    { 
     return "Error Occurred"; 
    } 


}

代碼它工作正常，當我上傳小圖片，但如果我上傳大尺寸的圖片會產生錯誤。請幫幫我。

任何幫助將受到高度的尊重。

來源

2014-03-18 Fazil Mir

爲什麼要將圖像作爲Base 64保存在數據庫中？沒有人會這麼做！ – adeneo

我沒有別的選擇。只要看到上面的圖片。無論添加在其上（文本和圖像）。它全部通過jquery。如果我上傳服務器上的映像並將路徑保存在數據庫中，那麼我將失去所有客戶端更改。這就是爲什麼我通過ajax發送整個內容。不刷新頁面 –

您是否找到了解決此問題的解決方案？ –

有點遲，但希望這可以幫助別人，在你的web.config文件通過在配置級別，添加該代碼增加maxJsonLength：

<system.web.extensions> 
    <scripting> 
    <webServices> 
     <jsonSerialization maxJsonLength="50000000"/> 
    </webServices> 
    </scripting> 
</system.web.extensions>

的值等於50MB。

來源

2016-12-15 16:54:33 JCO9

如何通過ajax發送大的base64圖像字符串？

回答

相關問題