html - 选择图像后从文件输入框提交表单

问题描述

我正在尝试从输入 [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.

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

标签： htmljquerywordpressformsfile-upload

我认为您正在寻找更改事件：

演示

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

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

html - 选择图像后从文件输入框提交表单

问题描述

解决方案

推荐阅读