如何实现每次点击file input时清空已有的图片预览

• 语法错误：写的click事件监听函数少了末尾的闭合括号，代码直接无法执行。
• 选择器用错：padit是预览图片的class属性，不是id，getElementById只能匹配id属性的元素，根本选不到你要删除的预览图。
• 逻辑不全：就算选对了元素，你每次只删1个元素，多图上传时剩下的旧预览图清不干净；而且你没重置file input的选中值，要是打开文件选择框后点了取消，旧的文件选中状态还会残留。
• 多余混写：你的项目已经引入了jQuery，没必要单独混写原生JS做同一件事，容易出现执行顺序冲突。

直接替换你原来的jQuery逻辑即可，做了双保险处理，点击上传按钮选新文件前就清空旧预览，渲染新图前再清空一次容器，不会有残留：

$(function() {
  var imagesPreview = function(input, placeToInsertImagePreview) {
    // 渲染新预览前先清空容器内所有旧内容
    $(placeToInsertImagePreview).empty();
    if (input.files) {
      var filesAmount = input.files.length;
      // 补了循环变量的let声明，避免污染全局作用域
      for (let i = 0; i < filesAmount; i++) {
        var reader = new FileReader();
        reader.onload = function(event) {
          $('<img class="padit">').attr('src', event.target.result).appendTo(placeToInsertImagePreview);
        }
        reader.readAsDataURL(input.files[i]);
      }
    }
  };

  // 点击上传控件时触发重置
  $('#gallery-photo-add').on('click', function() {
    $(this).val(''); // 清空file input已选中的文件记录
    $('div.gallery').empty(); // 删除所有旧的预览图片
  });

  // 选中新文件后渲染预览
  $('#gallery-photo-add').on('change', function() {
    imagesPreview(this, 'div.gallery');
  });
});

补充说明：之所以同时在click事件和预览渲染前都加清空逻辑，是为了兼容「打开文件选择框后点取消没选新文件」的场景——这种情况change事件不会触发，要是只在change里清空，点取消后旧预览会错误保留。

如果你一定要用你之前写的原生JS思路实现，修正后的版本如下，不推荐和jQuery混写：

const element = document.getElementById("gallery-photo-add");
element.addEventListener("click", function() {
  this.value = ''; // 重置文件选中状态
  document.querySelector("div.gallery").innerHTML = ''; // 清空预览容器所有内容
}); // 你之前的代码就是漏了这里的闭合括号

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