你的核心困扰是动态生成的表单没有唯一标识，没法精准定位到触发事件的对应表单。不过我们完全可以借助DOM元素的层级关系来搞定，不用依赖ID。

方法一：直接提交当前文件输入框所属的表单 #

这是最简洁的方式——当文件选择完成时，直接通过文件输入框获取它所在的表单并提交，省去查找按钮的步骤：

// 用事件委托监听所有动态添加的文件输入框的change事件
document.addEventListener('change', function(e) {
  // 确认触发事件的是文件输入框
  if (e.target.type === 'file') {
    // 获取当前输入框所属的表单
    const currentForm = e.target.form;
    if (currentForm) {
      // 提交表单
      currentForm.submit();
    }
  }
});

方法二：定位当前表单内的提交按钮并触发点击 #

如果你的提交按钮有额外的处理逻辑，必须触发它的点击事件，可以这么做：

document.addEventListener('change', function(e) {
  if (e.target.type === 'file') {
    // 向上查找最近的表单父元素
    const currentForm = e.target.closest('form');
    if (currentForm) {
      // 查找表单内的提交按钮（兼容button和input类型的提交按钮）
      const submitBtn = currentForm.querySelector('button[type="submit"], input[type="submit"]');
      if (submitBtn) {
        // 触发按钮点击
        submitBtn.click();
      }
    }
  }
});

为什么这个方案可行？ #

• e.target精准指向触发change事件的那个文件输入框，不管表单是静态还是动态生成的，都能准确捕获当前元素。
• closest('form')会从当前元素向上遍历DOM树，找到最近的<form>父元素，完美适配动态添加的表单结构。
• 事件委托document.addEventListener可以监听后续所有动态添加元素的事件，不用每次新增表单都重新绑定事件。

额外优化提示 #

如果你的文件输入框有专属类名（比如upload-file-input），可以把判断条件写得更精准，避免干扰页面上其他文件输入框：

document.addEventListener('change', function(e) {
  if (e.target.classList.contains('upload-file-input') && e.target.type === 'file') {
    // 后续逻辑同上
  }
});

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