js多图片上传预览删除

基础概念

JavaScript多图片上传预览删除功能允许用户在网页上选择多个图片文件，并在选择后立即在页面上显示这些图片的预览。用户还可以选择删除某个预览的图片。这个功能通常用于社交媒体、电商网站等需要用户上传图片的场景。

类型

单图上传：一次只能上传一张图片。
多图上传：一次可以上传多张图片。
拖拽上传：用户可以通过拖拽文件到指定区域来上传图片。

应用场景

社交媒体平台：如微博、Instagram等，用户可以上传多张照片分享生活点滴。
电商平台：用户可以上传商品的多角度图片以便买家更好地了解商品。
在线相册：用户可以上传多张照片创建个人相册。

示例代码

以下是一个简单的JavaScript多图片上传预览删除功能的实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多图片上传预览删除</title>
    <style>
        .preview-container {
            display: flex;
            flex-wrap: wrap;
        }
        .preview-item {
            margin: 10px;
            position: relative;
        }
        .delete-btn {
            position: absolute;
            top: 5px;
            right: 5px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <input type="file" id="fileInput" multiple>
    <div class="preview-container" id="previewContainer"></div>

    <script>
        document.getElementById('fileInput').addEventListener('change', function(event) {
            const files = event.target.files;
            const previewContainer = document.getElementById('previewContainer');
            previewContainer.innerHTML = ''; // Clear previous previews

            for (let i = 0; i < files.length; i++) {
                const file = files[i];
                if (file.type.startsWith('image/')) {
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        const img = document.createElement('img');
                        img.src = e.target.result;
                        img.style.width = '100px';
                        img.style.height = '100px';

                        const deleteBtn = document.createElement('span');
                        deleteBtn.className = 'delete-btn';
                        deleteBtn.textContent = 'X';
                        deleteBtn.onclick = function() {
                            previewContainer.removeChild(img.parentElement);
                        };

                        const previewItem = document.createElement('div');
                        previewItem.className = 'preview-item';
                        previewItem.appendChild(img);
                        previewItem.appendChild(deleteBtn);

                        previewContainer.appendChild(previewItem);
                    };
                    reader.readAsDataURL(file);
                }
            }
        });
    </script>
</body>
</html>