JavaScript中裁剪图片后触发input的onchange事件问题

裁剪图片后直接通过fileInput.files = cropImage给input赋值文件，input显示已选择文件但未触发change事件，而手动选择图片时能正常触发。由于依赖条码读取库，必须触发该事件才能让库正常工作，请问如何手动触发这个事件？

相关代码 #

document.getElementById("html5-qrcode-anchor-scan-type-change")?.click();
let fileButton = document.getElementById(
  "html5-qrcode-button-file-selection"
) as HTMLInputElement | undefined;
let fileInput = document.getElementById(
  "html5-qrcode-private-filescan-input"
) as HTMLInputElement | undefined;
if (fileButton) {
  fileButton.style.display = "none";
}

if (fileInput) {
  fileInput.style.display = "block";
  fileInput.addEventListener(
    "change",
    (e) => {
      // 条码读取库的逻辑依赖此事件触发
    },
    false
  );
}

解决方案 #

直接在给fileInput.files赋值后，手动创建并分发change事件即可，现代浏览器推荐使用以下写法：

// 假设cropImage是处理后的FileList或File对象
if (fileInput) {
  fileInput.files = cropImage;
  // 创建并触发change事件
  const changeEvent = new Event('change');
  fileInput.dispatchEvent(changeEvent);
}

如果需要兼容旧版浏览器（如IE），可以使用兼容写法：

if (fileInput) {
  fileInput.files = cropImage;
  if (document.createEvent) {
    const event = document.createEvent('Event');
    event.initEvent('change', true, true);
    fileInput.dispatchEvent(event);
  } else {
    // 针对IE的兼容写法
    fileInput.fireEvent('onchange');
  }
}

注意：务必确保change事件的监听代码在触发事件之前执行，否则事件无法被捕获。

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