Contact Form7表单提交后如何清除上传图片的预览显示

你可以在原有代码的基础上新增Contact Form 7内置的提交完成事件监听即可实现需求，以下是修改后的完整代码：

[file fileuploader filetypes:jpg id:uploader]
<img id="preview" src="#" />
<script>
var uploader = document.getElementById('uploader');
var preview = document.getElementById('preview'); // 提前获取预览节点，避免全局变量隐患

// 上传预览逻辑
uploader.addEventListener('change', (event) => {
  if (uploader.files.length > 0) {
    // 每次创建新预览前先释放之前的资源，减少内存占用
    if (preview.src !== '#') {
      window.URL.revokeObjectURL(preview.src);
    }
    preview.src = window.URL.createObjectURL(uploader.files[0]);
  }
});

// 提交成功后清空预览逻辑
document.addEventListener('wpcf7mailsent', function() {
  window.URL.revokeObjectURL(preview.src);
  // 重置预览图地址为初始值
  preview.src = '#';
  // 可选：同步重置文件上传字段，避免特殊场景下内容残留
  uploader.value = '';
}, false);

// 若需要提交失败/校验不通过时也清空预览，取消下方代码注释即可
/*
document.addEventListener('wpcf7invalid wpcf7mailfailed', function() {
  window.URL.revokeObjectURL(preview.src);
  preview.src = '#';
  uploader.value = '';
}, false);
*/
</script>

核心修改说明：

• 优化了原有预览逻辑的冗余代码，同时新增预览资源释放步骤，避免无效内存占用
• 监听CF7原生wpcf7mailsent事件，该事件会在表单提交成功、CF7自动清空其他表单字段后触发，和其他字段的清空时机完全对齐
• 事件触发时先释放预览资源，再将预览图的src重置为初始值#，完成预览清空
• 额外兼容了提交失败、表单校验不通过的场景，可按需启用

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