I am facing an issue while trying to retrieve images from my database. The process works smoothly with small images, but when attempting to do the same with the default Windows 7 images (Desert, Koala, Penguins, Tulips, etc.), I encounter an error:
"Error during serialization or deserialization using the JSON JavaScriptSerializer. The length of the string exceeds the value set on the maxJsonLength property."
To address this problem, I made changes to my web.config file as follows:
<scripting>
<webServices>
<jsonSerialization maxJsonLength="2147483647"/>
</webServices>
</scripting>
The code snippet used to fetch the images is as follows:
public static byte[] Serialize(object obj)
{
var binaryFormatter = new BinaryFormatter();
var ms = new MemoryStream();
binaryFormatter.Serialize(ms, obj);
return ms.ToArray();
}
[WebMethod]
public string ObtenerImagen(int id)
{
DataTable dt = new DataTable();
dt = conn.consultarImagen("alertas", id);
Imagenes img;
List<Imagenes> lista = new List<Imagenes>();
for (int i = 0; i < dt.Rows.Count; i++)
{
img = new Imagenes();
img.Id = Convert.ToInt32(dt.Rows[i]["Id"]);
img.FileName = dt.Rows[i]["FileName"].ToString();
img.Type = dt.Rows[i]["ContentType"].ToString();
img.Content = Convert.ToBase64String(Serialize(dt.Rows[i]["Content"]));
img.IdAlerta = Convert.ToInt32(dt.Rows[i]["IdAlerta"]);
img.Pie = dt.Rows[i]["PieFoto"].ToString();
//Populating the list
lista.Add(img);
img = null;
}
JavaScriptSerializer js = new JavaScriptSerializer();
string lineas = js.Serialize(lista);
return lineas;
}
Subsequently, a javascript function is utilized along with Ajax:
success: function (data) {
var aRC = JSON.parse(data.d);
var lineas = "";
for (var i = 0; i < aRC.length; i++) {
var id = aRC[i].Id;
var num = id;
var rev = aRC[i].FileName;
var pur = aRC[i].Type;
var status = aRC[i].Content;
var imagen = status.substring(36, status.length - 37);
var owner = aRC[i].IdAlerta;
var pie = aRC[i].Pie;
lineas += '<div class="col-lg-3 col-md-4 col-xs-3 thumb marco">';
lineas += '<a class="thumbnail" href="#">';
lineas += '<img class="responsive" src="data:image/jpeg;base64,' + imagen + '" />';
lineas += '<p class="text-justify" id="Pie' + i + '">' + pie + '</p>';
lineas += '</a>';
lineas += '<span class="btn btn-xs btn-success fa fa-pencil hidden-print" id="EditPie' + i + '"></span>';
lineas += '<input type="text" class="form-control hidden hidden-print" id="PiePag' + i + '"> <span class="btn btn-xs btn-success fa fa-check hidden hidden-print" id="OkPie' + i + '"></span>';
lineas += '</div>';
}
$('#Imagenes').html(lineas);
I am seeking guidance on how to resolve this issue. Any suggestions would be appreciated.
EDIT: The process works fine with a single image, but encounters an issue when attempting to display multiple images.