Isolate and update only one Div

Question

It is possible to 'isolate' a Div and update only her ?

Example:

I have the option to change the profile photo on the user, where as soon as it is changed from the one Reload on the page in order to update the Div featured:

Every change is made via AJAX.

follows ajax:

function mostraImagem(img) {
                var fileExtension = ['jpeg', 'jpg', 'png', 'gif', 'bmp'];
                if ($.inArray($(img).val().split('.').pop().toLowerCase(), fileExtension) == -1) {
                    swal('', 'Formato do arquivo inválido! Somente JPG, JPEG, PNG, BMP são permitidos.', 'warning');
                    return false;
                }
                else {
                    sizes = img.files[0].size;
                    if (parseInt(sizes) > 100000) {
                        swal("", "Tamanho do arquivo inválido! Tamanho máximo permitido 100 KB", 'warning');
                        return false;
                    }
                    else {
                        if (img.files && img.files[0]) {
                            var reader = new FileReader();

                            reader.onload = function (e) {
                                var imagem = document.getElementById("imgImage");
                                imagem.src = e.target.result;
                                imgConvertida = imagem.src;
                                imgConvertida = 'data:image;base64,' + reader.result.replace('data:image/' + $(img).val().split('.').pop().toLowerCase().replace('jpg', 'jpeg') + ';base64,', '');
                                SetarImagem(imgConvertida);
                            };
                            reader.readAsDataURL(img.files[0]);
                        }
                    }
                }
            }

            function SetarImagem(imgConvertida) {
                var vData = {
                    img2: imgConvertida
                };

                $.post("/MeusDados/SetarImagem", { 'img': imgConvertida }, function (data) {
                    swal('', 'Foto alterada com sucesso.', 'success');
                    setTimeout(recarregarPagina, 2300);
                });
            }
            function recarregarPagina() {
                window.location.reload();
            }

Photo recovery:

Homecontroller:

 Hashtable hash = new Hashtable();
                hash.Add("codigo", clientes.CliCodigo);
                hash.Add("nome", (!string.IsNullOrEmpty(clientes.CliApelido) ? clientes.CliApelido : primeiro + " " + ultimo));
                hash.Add("nome2", (!string.IsNullOrEmpty(clientes.CliApelido) ? clientes.CliApelido : clientes.CliNome));
                if (fotos != null)
                {
                    if (fotos.CliFoto != null)
                    {
                        hash.Add("foto", System.Text.Encoding.UTF8.GetString(fotos.CliFoto, 0, fotos.CliFoto.Length));
                    }
                }
                return JsonConvert.SerializeObject(hash);

View:

 $.get("/Home/ConsultarDadosUsuario", null, function (data) {
                if (data != null && data != undefined) {
                    var objeto = JSON.parse(data);
                    $("#nome").text(objeto.nome);
                    $("#nome2").text(objeto.nome2);
                    if (objeto.foto != null) {
                        $("#imgpequena").attr("src", "data:image;base64," + objeto.foto);
                        $("#fotoGrande").attr("src", "data:image;base64," + objeto.foto);
                    }
                }
            });

Answer 1

Instead of doing Reload, assign src to the images you’ve already uploaded.

function SetarImagem(imgConvertida) {
  var vData = {
    img2: imgConvertida
  };

  $.post("/MeusDados/SetarImagem", {
    'img': imgConvertida
  }, function(data) {
    $("#imgpequena").attr("src", imgConvertida);
    $("#fotoGrande").attr("src", imgConvertida);
    swal('', 'Foto alterada com sucesso.', 'success');
    //setTimeout(recarregarPagina, 2300);

  });
}