如何通过ajax发送大型base64图像字符串?

时间:2014-03-18 20:06:20

标签: jquery asp.net ajax image base64

我在通过ajax发送base64图像字符串时遇到问题。当我上传小图像时它工作正常,但当我尝试上传大图像时,它会产生错误。实际上我正在创建一个在线可定制的打印Web应用程序。所以有一个选项供用户添加Text&图片。我想要的是当用户按下提交按钮时,html页面的body标签内的整个数据应该通过ajax传递到我的sql server数据库。

Here is the image

这是我的Mark Up

<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";
    }


}

我上传小图片时工作正常,但如果我上传大尺寸图片则会产生错误。请帮我。

任何帮助都会受到高度重视。

1 个答案:

答案 0 :(得分:2)

有点晚了但希望这可以帮助某人在 web.config 文件中通过在配置级别添加此代码来增加 maxJsonLength

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

该值等于50mb。