选择图片后从文件输入框提交表单

Question

我正在尝试从输入 [type=file] 对话框窗口触发表单提交。我正在尝试简化选择图像的过程，然后必须单击另一个按钮才能将表单提交到数据库。

我已更新问题以包含下面的屏幕截图和代码，希望能更清楚地说明我遇到的问题。

注意： 有人问我为什么不向输入按钮添加 id，但我不能，因为文件输入是从函数调用的，并且由于它是 Windows 进程，所以我无法添加/更改它。

这里有一些代码/图片可以更好地说明问题。

1 - 用户单击更改图片按钮以更新他们的个人资料图片。此按钮运行简码 [upload-user-profile-avatar]。

2 - 短代码触发标准输入文件打开框窗口。

3 - 用户双击文件或单击文件并按下打开按钮后，将自动提交用户个人资料头像插件的表单。

尝试： 我最初开始使用 jQuery 来尝试附加到表单并在点击时提交，

    jQuery('input[type=file]').change(function(){
        nameOfForm.submit();
    });

但是我在 SO 帖子中读到其他人正在尝试类似的事情，而 jQuery 不会提交表单，所以他们不得不切换到 javascript，我这样做了（因为 jQuery 没有提交表单）.. .我想出这个是为了测试。

var form = document.getElementsByClassName("update-user-profile-avatar");
var inputs = document.getElementsByTagName('input');

for(var i = 0; i < inputs.length; i++) {
    if(inputs[i].type.toLowerCase() == 'file') {
        console.log(inputs[i].value);
        form.submit();
    }
}

所以这很有帮助，我可以看到打开的对话框窗口正在获取正确的文件名，但仍然没有提交表单，并且我在控制台中收到 form.submit() is not a function 错误。

然后我读到 html 表单提交可能有很多奇怪之处，所以尝试一下这些思路。

jQuery('input[type=file]').change(function(){ 
    for(var i = 0; i < inputs.length; i++) {
        if(inputs[i].type.toLowerCase() == 'file') {
            console.log(inputs[i].value);
            HTMLFormElement.prototype.submit.call(form);
        }
    }
});

产生了这个错误：

'submit' called on an object that does not implement interface HTMLFormElement.

所以我想我在这里旋转我的轮子。我觉得这是可行的，只是我没有使用正确的方法。

Answer 1

我认为您正在寻找change 事件：

Demo

$('input[type=file]').change(function(){
   $('form').submit()
})

不幸的是，出于安全考虑，浏览器不允许您访问打开的窗口。但是使用.change() 方法，一旦输入的值发生变化，它将触发您想要的任何功能。无论他们是双击一个文件来选择它，还是点击文件和“打开”按钮。