JavaScript拖拽上传多图片后，如何实现点击右上角按钮删除对应图片

本次调整核心是实现点击右上角叉号删除对应图片的需求，同时修正原代码语法错误、优化布局适配多图展示场景。

完整调整后代码 #

HTML代码 #

<br /><br />
<div class="container">
    <div class="row">
        <div>
            <div id="dropZone">
                <div class="icon"><i class="fas fa-cloud-upload-alt"></i></div>
                <header id="BackgroundText">拖拽文件到此处上传</header>
                <div id="imageHold" style="display:flex;gap:10px;flex-wrap:wrap;padding:10px;"></div>
            </div>
        </div>
    </div>
</div>
<div id="imgDetail" style="margin-top:15px;"></div>

CSS代码 #

#dropZone {
  border: 2px dashed gray;
  min-height: 200px;
  width: auto;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 10px;
}
#dropZone header{
  font-size: 20px;
  font-weight:bold;
}
.hoverActive{
  border: 2px dashed darkred !important;
}
/* 单张图片包裹容器 */
.img-item {
  position: relative;
  display: inline-block;
}
/* 删除按钮样式，定位到图片右上角 */
.delete-btn {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #000;
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  padding: 0;
}

JavaScript代码 #

var dropZone = document.getElementById('dropZone');
var details = document.querySelector('#imgDetail');
var imageHold = document.getElementById('imageHold');
var backgroundText = document.getElementById('BackgroundText');

///////////
// 拖拽经过事件
///////////
dropZone.addEventListener('dragover', function (e) {
    e.stopPropagation();
    e.preventDefault();
    e.dataTransfer.dropEffect = 'copy';
    dropZone.classList.add("hoverActive");
});

/////////////
// 拖拽离开事件
/////////////
dropZone.addEventListener('dragleave', function (e) {
    dropZone.classList.remove("hoverActive");
});

//////////
// 文件放下事件
//////////
dropZone.addEventListener('drop', (e) => {
    dropZone.classList.remove("hoverActive");
    backgroundText.style.visibility = "hidden";
    e.stopPropagation();
    e.preventDefault();

    details.innerHTML = '';
    var files = e.dataTransfer.files;

    Object.values(files).forEach((file) => {
        var reader = new FileReader();
        reader.onloadend = () => {
            // 创建单张图片的包裹容器
            const imgItem = document.createElement('div');
            imgItem.className = 'img-item';

            // 渲染图片
            var img = document.createElement('img');
            img.src = reader.result;
            img.width = 150;
            img.height = 150;
            img.border = 2;
            imgItem.appendChild(img);

            // 创建删除按钮并绑定删除事件
            const deleteBtn = document.createElement('button');
            deleteBtn.className = 'delete-btn';
            deleteBtn.innerText = 'X';
            deleteBtn.onclick = function() {
                // 删除对应图片容器
                imgItem.remove();
                // 删除对应的文件信息展示
                if (fileDetailEle) fileDetailEle.remove();
                // 所有图片删完后恢复提示文字
                if (imageHold.children.length === 0) {
                    backgroundText.style.visibility = 'visible';
                }
            }
            imgItem.appendChild(deleteBtn);
            imageHold.appendChild(imgItem);

            // 渲染文件信息
            const fileDetailEle = document.createElement('p');
            fileDetailEle.innerText = `文件名: ${file.name} | 大小: ${bytesToSize(file.size)}`;
            details.appendChild(fileDetailEle);
        };
        reader.readAsDataURL(file);
    });
});

// 字节大小格式化
function bytesToSize(bytes) {
    var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
    if (bytes == 0) return '0 Byte';
    var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
    return Math.round(bytes / Math.pow(1024, i), 2) + ' ' + sizes[i];
}

调整说明 #

• 新增独立的图片容器包裹单张图片和删除按钮，通过相对+绝对定位实现按钮悬浮在图片右上角的效果
• 每个删除按钮绑定独立点击事件，点击时同步删除对应图片和文件明细
• 新增无图片时自动恢复上传提示文字的逻辑
• 修正原代码字符串拼接的语法错误，移除重复ID的问题
• 优化图片容器布局，支持多图自动换行展示

内容的提问来源于stack exchange，提问作者Dan