如何通过编程方式检测文件输入框已被清空

问题原因 #

第三方插件清空文件输入框时，通常是通过JS直接修改输入框的value或files对象，而非用户原生交互操作，这种情况下浏览器不会自动触发change或input事件——只有用户主动选择/删除文件，或者代码手动调用dispatchEvent触发事件时，这些事件才会生效。

解决方案 #

方案1：事件委托监听移除按钮点击

因为预览元素是文件添加后才注入DOM的，所以用事件委托给父容器（或全局）绑定点击事件，捕获移除按钮的操作：

// 假设移除按钮的类名为remove-preview-btn，可根据实际调整选择器
document.addEventListener('click', (e) => {
  if (e.target.matches('.remove-preview-btn')) {
    const fileInput = document.getElementById('thumb');
    if (fileInput.files.length === 0) {
      console.log('文件已移除');
      // 这里写入你的清空后处理逻辑
    }
  }
});

方案2：定时检查文件数量变化

如果找不到移除按钮的统一选择器，可以定时检测输入框的文件数量变化：

const fileInput = document.getElementById('thumb');
let lastFileCount = fileInput.files.length;

setInterval(() => {
  const currentCount = fileInput.files.length;
  // 从有文件变为无文件时触发逻辑
  if (lastFileCount > 0 && currentCount === 0) {
    console.log('文件已移除');
    // 执行你的业务代码
  }
  lastFileCount = currentCount;
}, 100); // 间隔可根据需求调整，比如50ms或200ms

方案3：使用MutationObserver监听属性变化

通过MutationObserver观察输入框的value属性变化（文件清空时输入框的value会变为空）：

const fileInput = document.getElementById('thumb');
const observer = new MutationObserver((mutations) => {
  mutations.forEach(mut => {
    if (mut.attributeName === 'value' && fileInput.value === '') {
      console.log('文件已移除');
      // 处理清空后的逻辑
    }
  });
});

// 开始监听输入框的属性变化
observer.observe(fileInput, { attributes: true });

// 页面销毁时记得断开监听，避免内存泄漏
// observer.disconnect();

方案4：优先使用插件自带回调

如果插件有提供文件移除的钩子（比如onRemove、onFileDelete这类回调），直接用官方回调是最可靠的方式，不会受DOM结构变化影响，去插件文档里找找相关配置即可。

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