如何通过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图像字符串？

回答

相关问题