为什么此表单未在目标 iframe 内提交？答案

【问题标题】：Why is this form not submitting inside the target iframe?为什么此表单未在目标 iframe 内提交？
【发布时间】：2013-02-14 19:11:10
【问题描述】：

我创建了一个以 iframe 为目标的表单以提交图像。我以前绝对有这个工作，但现在整个页面都提交了，而不仅仅是 iframe。我完全不知所措。

HTML：

<form id="upload-form" name="upload-form" class="" action="/handle/upload" method="post" enctype="multipart/form-data">
    <div class="fileinput-wrap">
        <label for="fileinput">Image input</label>
        <input type="file" name="file" id="fileinput" />
     </div>
    <input type="submit" id="submitter" name="submitter" />
</form>

JS：

$("#fileinput").on('change', function () {
    var $iframe = $("<iframe />").attr({
        id: 'frame_uploader',
        name: 'frame_uploader'
    });
    var $img = $("<img />");
    var imageUrl = "";
    $("#upload-form").prepend($img).append($iframe)
        .attr('target', 'frame_uploader')
        .trigger('submit');
    $iframe.load(function () {
        var imageUrl = $iframe.contents().find("body").text();
        $img.attr('src', imageUrl);
    });
});

http://jsfiddle.net/NVp9K/

【问题讨论】：

这绝对必须支持旧版本的IE，所以请不要HTML文件API建议。
hmm.. 您是否尝试将 iframe 放置在表单内部以外的其他位置？不确定它是否会有所作为。
@KevinB 是的，我确实尝试将它移到表单之外。没有帮助。不过还是谢谢。
您的 jsFiddle 示例似乎确实有效...
是的，我应该解释一下，它在 jsfiddle 中似乎工作正常，但在浏览器中，整个页面提交。

标签： jquery forms iframe upload

【解决方案1】：

我在某处读到某些 iframe 名称是保留的。更改 iframe 的名称已解决此问题。

【讨论】：

谢谢！谢谢！谢谢！调试起来真的很痛苦，我的 iframe 也有同样的问题，称为“background_file_upload”，将其更改为“my_iframe”，瞧！它奏效了。

【解决方案2】：

也许您应该在创建框架时添加框架 id 和名称属性。就像这样：

var $iframe = $("<iframe id=\"frame_uploader\" name=\"frame_uploader\" />");

【讨论】：