Как сделать форму отображения изображений

Я хочу, чтобы найденное изображение, относящееся к человеку, которого искали (в таблице людей), было представлено в html, но в то же время я хочу, чтобы, если пользователь захочет изменить фотографию, ему нужно просто щелкнуть на ней из уже представленных изображений, после чего откроется файловый проводник, чтобы можно было выбрать новое изображение. После того как новое изображение выбрано, оно должно временно отображаться в html вместо старого. Программа открывает файловый проводник, я выбираю новое изображение, но старое изображение не меняется, и новое изображение тоже не отображается ни в одном месте html. мой код:

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

и 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/*">

не работает

я попробовал многое из того, что говорит chatgpt, многие из них имеют смысл, но все равно не работают. То, что я ожидал: "загружается страница регистрации человека, получающая номер, который ищет в базе данных и возвращает человека из базы данных. Затем она заполняет некоторые элементы на экране данными, найденными в таблице базы данных об этом человеке. Среди объектов модели людей есть model.ImageField, в котором хранится фотография каждого человека." Мне нужно следующее: я хочу, чтобы найденное изображение, относящееся к человеку, которого искали (в таблице people), было представлено в html, но в то же время я хочу, чтобы, если пользователь захочет изменить фотографию, ему нужно просто щелкнуть на ней из уже представленных изображений, после чего откроется проводник файлов, чтобы можно было выбрать новое изображение. После выбора нового изображения оно должно временно отображаться в html на месте старого, но замена фотографии в базе данных должна происходить только после нажатия кнопки отправки

Попробуйте этот код в файле index.html:

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

Я решаю проблему

для того, чтобы эта функциональность работала в шаблоне html в django, смотрите этот код

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

возврат;

}

let reader = new FileReader();

reader.onload = () => {

photo.src = reader.result;

}

reader.readAsDataURL(file.files[0]);

});

Вернуться на верх