LucasOliveira
March 18, 2024
68 views
0 votes
2 Answers

Using Django. In a template i want an image that if the user wants to change the photo, he just needs to click in the image already presented and then the file explorer is opened so that a new image can be chosen. Then the new image must be preview in the template in place of the old one temporarily.

the program is opening the file explorer, i choose the new image but the old image isn’t change and the new image isn’t displayed in any place of the html too
my code:

<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>

and the 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/*">

it aren’t working

what i expected is: "a person registration page is loaded, receiving a number that searches the database and returns a person from the database. It then fills in some elements on the screen with the data found in the database table about that person. Among the people model objects there is a model.ImageField that stores a photo of each person." What I need is: I want the image found referring to the person that was searched for (in the people table) to be presented in the html, but at the same time I want it so that if the user wants to change the photo, he just needs to click on it of the image already presented and then the file explorer is opened so that a new image can be chosen. Once the new image has been chosen, the new image must be displayed in the html in place of the old one temporarily, but the replacement of the photo in the database must only be carried out after a submit button is clicked

Answers

Chosen as BEST ANSWER

I solve the problem

to make this functionality works in a template html in django, see this code

html

<script>
                '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]);
                });
            </script>

.maxSize{
                width: 203px;
                height: 215px;
                float: left;
                margin-left: 56;
                margin-top: 30px;
            }

            #imgPhoto{
                width: 203px;
                height: 215px;
                float: left;
                overflow: hidden;
                box-shadow: 0px 0px 4px 5px rgba(0, 0, 0, 0.30);
                border-radius: 10px;
                object-fit:cover;

            }

            #imgPhoto:hover{
                object-fit:cover;
                cursor: pointer;
                
            }

<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]);

});

(Edit)

Try this code in index.html file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <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/*">

<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>
</body>
</html>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – How to display images in templates using Django?

Answers

Try this code in index.html file: