Lucas_oliveirag2

Resolvi o problema html <div class="marg"> <div class="maxSize"> <div class="imageContainer"> <img style="object-fit:cover;" src="{{ pessoa.imagem.url }}" alt="Imagem da Pessoa" id="imgPhoto"> </div> </div> <input type="file" id="flImage" name="flImage" accept="image/*"> javascript 'use strict' let photo = document.getElementById('imgPhoto'); let file = document.getElementById('flImage'); photo.addEventListener('click', () => { file.click(); }); file.addEventListener('change', () => { if (file.files.length <= 0) { return; } let reader = new FileReader(); reader.onload = () => { photo.src = reader.result; } reader.readAsDataURL(file.files[0]); });

eu fiz alguns teste e coloquei um alert depois de "document.getElementById("input-imagem").addEventListener('change', function(event) {" e o alert não foi mostrado, aparentemente ele não está conseguindo entrar no evento 'change'. mas ainda não sei o que fazer

Galera to meio desesperado já. O cenario é esse: "uma pagina de cadastro de pessoas é carregada recebendo um numero que faz uma busca no banco de dados e retorna uma pessoa do banco de dados. A seguir ele preenche alguns elementos da tela com os dados encontrados na tabela do banco sobre essa pessoa. Entre os objetos da model de pessoas há um model.ImageField que guarda uma foto de cada pessoa." O que eu preciso de preciso é: Eu quero que a imagem encontrada referente a pessoa que foi buscada (na tabela de pessoas) seja apresentada no html, mas ao mesmo tempo quero que caso o usuario queira alterar a foto ele só precise clicar em cima da propria imagem já apresentada e então o explorador de arquivos seja aberto para que uma nova imagem seja escolhida. Assim que escolhida a nova imagem, a nova imagem deve ser exibida no html no lugar da antiga temporariamente, mas a substituição da foto no banco de dados deve ser efetuada somente depois que um botão submit seja clicado meu codigo: <script> // Quando a imagem da pessoa for clicada document.getElementById("imagem-pessoa").addEventListener('click', function() { // Abrir o explorador de arquivos ao clicar no campo de arquivo oculto document.getElementById("input-imagem").click(); }); // Quando uma nova imagem for selecionada document.getElementById("input-imagem").addEventListener('change', function(event) { // Capturar a nova imagem selecionada const novaImagem = event.target.files[0]; // Atualizar temporariamente a imagem no HTML const urlNovaImagem = URL.createObjectURL(novaImagem); document.getElementById("imagem-pessoa").src = urlNovaImagem; }); </script> o html- <img class="rectangle" id="imagem-pessoa" src="{{ pessoa.imagem.url }}" alt="Imagem da Pessoa">> <input type="file" id="input-imagem" style="display: none;" accept="image/*"> não está funcionando