Thiết kế website giá rẻ

Question

how can i add a delete button to apear when i select an uploaded photo?
I tried a multiple things but didn.t work.

I.m new and i try to do my best

To be clear with what the result i want to get :
I created a upload button that instant show uploaded images to the page.
Now i want to add a delete button that apears on images when they go full-screen, and by pressing the delete button, to delete the image.

This is the code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Încarcă și afișează imagini</title>

<style>
    h1 {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    #image-container {
        display: flex;
        flex-wrap: wrap; /* Nu permite ca imaginile să se mute pe linie nouă */
        overflow-x: auto; /* Scrollează orizontal dacă depășește lățimea containerului */
        margin-bottom: 20px;
    }
    .uploaded-image {
        margin-right: 10px;
        cursor: pointer; /* Adăugăm un cursor de tip pointer pentru a indica că imaginea este clicabilă */
    }
</style>
</head>
<body>
    <h1>salut</h1>

<input type="file" id="file-input" multiple>
<div id="image-container"></div>

<script>
document.getElementById('file-input').addEventListener('change', function() {
    var files = this.files;
    if (files) {
        for (var i = 0; i < files.length; i++) {
            var reader = new FileReader();
            reader.onload = (function(file) {
                return function(e) {
                    var image = new Image();
                    image.src = e.target.result;
                    image.className = 'uploaded-image'; // Adăugăm clasa 'uploaded-image' pentru a aplica stilurile CSS
                    image.onload = function() {
                        var imageContainer = document.getElementById('image-container');
                        imageContainer.appendChild(image);
                        
                        // Salvăm imaginea în localStorage
                        var imageDataURL = e.target.result;
                        var images = JSON.parse(localStorage.getItem('images')) || [];
                        images.push(imageDataURL);
                        localStorage.setItem('images', JSON.stringify(images));
                    };

                    // Adăugăm evenimentul de click pentru a afișa imaginea în full screen
                    image.addEventListener('click', function() {
                        showFullScreenImage(image.src);
                    });
                };
            })(files[i]);
            reader.readAsDataURL(files[i]);
        }
    }
});

// Funcție pentru a afișa imaginile stocate în localStorage
function displayStoredImages() {
    var images = JSON.parse(localStorage.getItem('images')) || [];
    var imageContainer = document.getElementById('image-container');
    images.forEach(function(imageDataURL) {
        var image = new Image();
        image.src = imageDataURL;
        image.className = 'uploaded-image';
        imageContainer.appendChild(image);

        // Adăugăm evenimentul de click pentru a afișa imaginea în full screen
        image.addEventListener('click', function() {
            showFullScreenImage(image.src);
        });
    });
}

// Funcție pentru afișarea imaginii în full screen
function showFullScreenImage(imageSrc) {
    var fullScreenContainer = document.createElement('div');
    fullScreenContainer.style.position = 'fixed';
    fullScreenContainer.style.top = '0';
    fullScreenContainer.style.left = '0';
    fullScreenContainer.style.width = '100%';
    fullScreenContainer.style.height = '100%';
    fullScreenContainer.style.backgroundColor = 'rgba(0, 0, 0, 0.8)';
    fullScreenContainer.style.display = 'flex';
    fullScreenContainer.style.alignItems = 'center';
    fullScreenContainer.style.justifyContent = 'center';
    fullScreenContainer.style.zIndex = '9999';

    var fullScreenImageContainer = document.createElement('div');
    fullScreenImageContainer.style.position = 'relative'; // Permite poziționarea butonului de ștergere
    fullScreenImageContainer.style.maxWidth = '100%';
    fullScreenImageContainer.style.maxHeight = '100%';

    var fullScreenImage = new Image();
    fullScreenImage.src = imageSrc;
    fullScreenImage.style.width = '100%';
    fullScreenImage.style.height = 'auto';

    var deleteButton = document.createElement('button');
    deleteButton.innerText = 'Șterge'; // Textul butonului de ștergere
    deleteButton.style.position = 'absolute'; // Poziționează butonul de ștergere în colțul din dreapta sus
    deleteButton.style.top = '5px';
    deleteButton.style.right = '5px';
    deleteButton.style.padding = '5px';
    deleteButton.style.backgroundColor = 'red';
    deleteButton.style.color = 'white';
    deleteButton.style.border = 'none';
    deleteButton.style.cursor = 'pointer';

    // Adăugăm evenimentul de click pentru a șterge imaginea când butonul este apăsat
    deleteButton.addEventListener('click', function() {
        // Ștergem imaginea din container
        fullScreenContainer.parentNode.removeChild(fullScreenContainer);
        // Ștergem imaginea din localStorage
        var images = JSON.parse(localStorage.getItem('images')) || [];
        var index = images.indexOf(imageSrc);
        if (index !== -1) {
            images.splice(index, 1);
            localStorage.setItem('images', JSON.stringify(images));
        }
    });

    fullScreenImageContainer.appendChild(fullScreenImage);
    fullScreenContainer.appendChild(fullScreenImageContainer);
    fullScreenImageContainer.appendChild(deleteButton); // Adăugăm butonul de ștergere la containerul imaginii în ecran complet
    document.body.appendChild(fullScreenContainer);
}


// Funcție pentru afișarea imaginii în full screen
function showFullScreenImage(imageSrc) {
    var fullScreenContainer = document.createElement('div');
    fullScreenContainer.style.position = 'fixed';
    fullScreenContainer.style.top = '0';
    fullScreenContainer.style.left = '0';
    fullScreenContainer.style.width = '100%';
    fullScreenContainer.style.height = '100%';
    fullScreenContainer.style.backgroundColor = 'rgba(0, 0, 0, 0.8)';
    fullScreenContainer.style.display = 'flex';
    fullScreenContainer.style.alignItems = 'center';
    fullScreenContainer.style.justifyContent = 'center';
    fullScreenContainer.style.zIndex = '9999';

    var fullScreenImage = new Image();
    fullScreenImage.src = imageSrc;
    fullScreenImage.style.maxWidth = '100%';
    fullScreenImage.style.maxHeight = '100%';

    fullScreenImage.addEventListener('click', function() {
        document.body.removeChild(fullScreenContainer);
    });

    fullScreenContainer.appendChild(fullScreenImage);
    document.body.appendChild(fullScreenContainer);
}

// Apelăm funcția pentru a afișa imaginile stocate în localStorage
displayStoredImages();
</script>

</body>
</html>

Thank you!!!

I tried this but didn.t work

    deleteButton.addEventListener('click', function() {
        // Ștergem imaginea din container
        fullScreenContainer.parentNode.removeChild(fullScreenContainer);
        // Ștergem imaginea din localStorage
        var images = JSON.parse(localStorage.getItem('images')) || [];
        var index = images.indexOf(imageSrc);
        if (index !== -1) {
            images.splice(index, 1);
            localStorage.setItem('images', JSON.stringify(images));
        }
    });

    fullScreenImageContainer.appendChild(fullScreenImage);
    fullScreenContainer.appendChild(fullScreenImageContainer);
    fullScreenImageContainer.appendChild(deleteButton); // Adăugăm butonul de ștergere la containerul imaginii în ecran complet
    document.body.appendChild(fullScreenContainer);
}

Thiết kế website giá rẻ

Danh mục

How can i add a delete button to delete files uploaded to localstorage?