JS/Jquery实现图片上传时选择新图如何移除替换旧的图片缩略图？

问题原因 #

现有代码每次选择文件后仅向预览容器追加新图片元素，未清理之前生成的旧缩略图，导致多张图片叠加展示。

修复方法 #

在读取新选中的文件前，先清空预览容器的已有内容即可，推荐两种实现方式：

方式1：直接清空容器内容（简洁通用，适合预览容器仅用于展示缩略图的场景） #

在previewFiles函数获取预览容器节点后，新增清空内容的逻辑，完整代码如下：

function previewFiles() {
    var preview = document.querySelector('#preview');
    // 清空之前的所有预览内容
    preview.innerHTML = '';
    var files = document.querySelector('input[type=file]').files;
    function readAndPreview(file) {
        // 校验图片格式
        if (/\.(jpe?g|png|gif)$/i.test(file.name)) {
            var reader = new FileReader();
            reader.addEventListener("load", function () {
                var image = new Image();
                image.height = 200;
                image.title = file.name;
                image.style.marginTop = '10px';
                image.style.marginRight = '10px';
                image.style.borderRadius = '3px';
                image.style.marginBottom = '220px';
                image.src = this.result;
                preview.appendChild(image);
            }, false);
            reader.readAsDataURL(file);
        }
    }
    if (files) {
        [].forEach.call(files, readAndPreview);
    }
}

方式2：逐个子节点移除（适合预览容器内存在其他固定保留元素的场景） #

如果预览容器中还有其他不需要被清空的元素，可以改为仅移除已有的子节点：

// 替换preview.innerHTML = '' 为以下逻辑
while (preview.firstChild) {
    preview.removeChild(preview.firstChild);
}

原有HTML代码无需修改 #

现有HTML代码逻辑完全兼容上述修改，无需调整。

内容的提问来源于stack exchange，提问作者Huan Sheng Tew