Isolate and update only one Div

0

Is it possible to 'isolate' a Div and just update it?

Example:

I have the option to change the profile photo in the user, where as soon as it is changed from a reload in the page to update the highlighted Div :

AllchangesaremadeviaAJAX.

followsajax:

functionmostraImagem(img){varfileExtension=['jpeg','jpg','png','gif','bmp'];if($.inArray($(img).val().split('.').pop().toLowerCase(),fileExtension)==-1){swal('','Formatodoarquivoinválido!SomenteJPG,JPEG,PNG,BMPsãopermitidos.','warning');returnfalse;}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);
                    }
                }
            });
    
asked by anonymous 21.05.2018 / 16:32

1 answer

1

Instead of reloading, assign the src of the images to the one you've 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);

  });
}
    
21.05.2018 / 19:13