Question

我有一个非常简单的html表单：

<form enctype="multipart/form-data" method="POST" action="fileupload" id="image-upload-form" target="iframe-post-form">
    <input type="file" name="file" id="file-to-upload">
    <input type="submit" value="upload" id="image-upload-submit">
</form>

我正在使用Iframe Post Form库来提交我的图片。

当我使用以下jquery时，它完美地运行：

$(document).ready(function(){
    $('#image-upload-form').iframePostForm({
        post : function() {
           $("#progress-indicator").show();
        },
        complete : function (response) {
        $("#progress-indicator").hide();
            try {
                json = $.parseJSON(response);
            } catch (e) {}
         }
     });
});

现在，我想取消提交按钮，而页面应该在选择文件后立即自动提交图像。我是jquery和jscript的初学者，我必须做一些微不足道的错误，但我无法弄明白，为什么几乎相同的代码对我不起作用。这是错误的代码（我可以在firebug中看到，我的代码中的断点被击中，但图像不再被提交）：

$(function() {
    $('#file-to-upload').bind('change', function(event) {
        $('#image-upload-form').iframePostForm({
            post : function() {
                $("#progress-indicator").show();
            },
            complete : function (response) {
                $("#progress-indicator").hide();
                try {
                    json = $.parseJSON(response);
                } catch (e) {}
            }
        });
   });
});

非常感谢你的帮助。

SOLUTION：

收到@Huangism建议后，我终于找到了解决方案。我发布它以防有人需要解决同样的问题：

$(function() {
    $('#file-to-upload').bind('change', function(event) {
        $('#image-upload-form').submit().iframePostForm({
            post : function() {
                $("#progress-indicator").show();
            },
            complete : function (response) {
               $("#progress-indicator").hide();
               try {
                   json = $.parseJSON(response);                    
               } catch (e) {}
            }
        });
    });
});

Answer 1

我从来没有使用iframe post form lib，但是初始工作代码看起来就像是在文档就绪上设置了监听器，在你的代码中，你把设置放在了file-to-upload的change函数里面。所以基本上每次文件加载更改时，它都会每次都设置整个帖子形式。

您需要在更改时调用表单的提交功能。我不太清楚lib的帖子形式是什么，我不知道你的整个代码结构，所以我不能真正建议其他任何东西。但是你的代码的问题是你把帖子表格的设置放在了错误的地方

Iframe Post Form - 在输入字段的更改时提交html表单

1 个答案: