选择图片后如何触发input[type=file]关联表单自动提交

你之前的报错核心原因是document.getElementsByClassName返回的是类数组的HTMLCollection集合，不是单个DOM表单元素，所以直接调用submit方法必然会失败。另外如果表单内存在name/id为submit的元素，也会覆盖原生submit方法，调用原型方法的写法可以规避这个问题。

不需要修改原有input的属性，完全兼容你没有修改input权限的场景，代码如下：

// 用事件委托监听所有file输入框的change事件，动态生成的input也能生效
document.addEventListener('change', function(e) {
    if(e.target.type && e.target.type.toLowerCase() === 'file') {
        // 直接定位当前file输入框所属的目标表单
        const form = e.target.closest('form.update-user-profile-avatar');
        if(form) {
            // 规避表单内存在submit元素覆盖原生方法的问题
            HTMLFormElement.prototype.submit.call(form);
        }
    }
});

如果习惯用jQuery，可以用以下版本：

jQuery(document).on('change', 'input[type="file"]', function() {
    const form = jQuery(this).closest('form.update-user-profile-avatar')[0];
    if(form) {
        HTMLFormElement.prototype.submit.call(form);
    }
});

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