文件输入框变更时调用submit()方法失效的问题

问题核心：调用form.submit()方法时，浏览器不会触发表单的submit事件监听器——只有用户点击提交按钮这类交互触发的提交，才会自动触发该事件。

下面提供两种可行的解决办法：

方案一：手动触发submit事件 #

通过创建并分发submit事件，模拟用户触发提交的流程，这样就能触发绑定的事件监听器。修改后的代码如下：

const upload_form = document.getElementById('upload_form')
const user_file = document.getElementById('user_file')

upload_form.addEventListener('submit',e=>{
    alert('Form Submitted...')
    e.preventDefault()
})

user_file.addEventListener('change', () => {
    alert('user file changed...')
    // 创建submit事件并触发
    const submitEvent = new Event('submit')
    upload_form.dispatchEvent(submitEvent)
    // 如果需要实际提交表单，可根据事件处理里的preventDefault情况调整
    // 比如如果监听器里调用了e.preventDefault()，这里可以手动调用upload_form.submit()完成提交
})

方案二：提取共用逻辑到独立函数 #

把提交时的处理逻辑抽成单独的函数，不管是点击按钮还是文件变更，都直接调用这个函数，再执行表单提交。这种方式更简洁易懂，代码如下：

const upload_form = document.getElementById('upload_form')
const user_file = document.getElementById('user_file')

// 提取提交时的共用处理逻辑
function handleSubmit() {
    alert('Form Submitted...')
}

upload_form.addEventListener('submit',e=>{
    handleSubmit()
    e.preventDefault()
})

user_file.addEventListener('change', () => {
    alert('user file changed...')
    handleSubmit()
    // 执行表单提交
    upload_form.submit()
})

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