如何添加删除按钮来删除上传到本地存储的文件？

问题描述 投票：0回答：1

如何添加删除按钮以在选择上传的照片时出现？ 我尝试了多种方法但没有成功。

我是新人，我会尽力做到最好

要清楚我想要得到的结果： 我创建了一个上传按钮，可以立即将上传的图像显示到页面。 现在我想添加一个删除按钮，当图像全屏显示时，该按钮会出现在图像上，然后按删除按钮即可删除图像。

这是代码

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

谢谢！！！

我尝试过这个但没有成功

    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);
}
javascript
1个回答
0
投票

它可以工作并从 

localStorage
中删除图像，但不会从显示屏中删除图像。

为了解决这个问题，我们只需隐藏 

image
，它现在是函数 
showFullScreenImage
的参数（而不是它的 
imageSrc
），以便我们可以参考原始图像。


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);
                    });
                };
            })(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);
        });
    });
}

// Funcție pentru afișarea imaginii în full screen
function showFullScreenImage(image) {
    imageSrc = image.src
    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';

    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';
    deleteButton.style.zIndex = '111';

    // 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.parentElement.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));
        }

        image.style.display = 'none'
    });

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

// Apelăm funcția pentru a afișa imaginile stocate în localStorage
displayStoredImages();
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.