How to send large base64 image string through ajax?

Question

I am facing problem in sending base64 image string through ajax. When I upload small images it works fine but when i try to upload large images it generates an error. Actually i am creating an online customizable printing web application.So there is an option for user to add Text & Images. What i want is that when user press submit buttom, the whole data inside the body tag of html page should get passed through ajax to my sql server database.

Here is the image

Here is my 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>

Here is my 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);
        }

Here is my code behind

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


}

It works fine when i upload small images but it generates error if i upload large size of images. Please help me.

Any help would be highly esteemed.

Why save images as Base 64 in the database? There's a reason noone does that! — adeneo
– adeneo, Commented Mar 18, 2014 at 20:07
i have no other option. Just see the image above. whatever is added on it (text & images). its all through jquery. if i upload the image on the server and save the path in the database then i lost all the client side changes. so thats why i am sending whole content through ajax. without refreshing the page — Fazil Mir
– Fazil Mir, Commented Mar 18, 2014 at 20:11

JCO9 · Accepted Answer · 2016-12-15 16:54:33Z

2

A bit late but hope this helps someone, in your web.config file increase the maxJsonLength by adding this code at configuration level:

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

The value equals to 50mb.

answered Dec 15, 2016 at 16:54

JCO9

9901 gold badge15 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

GrahamJ Over a year ago

Great answer. I have been working on this for most of today. In addition to being some kind of genius, you have prevented a suicide.

Collectives™ on Stack Overflow

How to send large base64 image string through ajax?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related