Question

我目前在AJAX上传表单中使用iframe，我的问题是，一旦文件上传到iframe，它会将数据附加到div，所以我可以安全地说我可以在加载完成后删除iframe ？

我的js是

$("#formsubmit").click(function (event) {
            event.preventDefault();
            var iframe = $('<iframe name="postiframe" id="postiframe" style="display: none" />');

            $("body").append(iframe);

            var form = $('#theuploadform');
            form.attr("action", "uploader.php");
            form.attr("method", "post");
            form.attr("enctype", "multipart/form-data");
            form.attr("encoding", "multipart/form-data");
            form.attr("target", "postiframe");
            form.attr("file", $('#userfile').val());
            form.submit();

            $("#postiframe").load(function () {
                iframeContents = $("#postiframe")[0].contentWindow.document.body.innerHTML;
                $("#textarea").html(iframeContents);
                $("#postiframe").remove(); // i thought this would do it but it doesn't
            });

            return false;

        });

即使我有event.preventDefault（）;如果我在底部删除了返回false，它仍然会提交表单（刷新到新页面）。

我的HTML是：

<div id="uploadform">
<form id="theuploadform" action="">
<input id="userfile" name="userfile" size="50" type="file" />
<input id="formsubmit" type="submit" value="Send File" />
</form>
</div>      
<div id="textarea"></div>

总结一下我的问题：

复制到“textarea”后，是否可以在上传后删除iframe
如果是这样，$（“＃postiframe”）。删除无法正常工作
有谁知道为什么当我删除return false时，它重新加载页面而不是使用event.preventDefault（）;在开头

提前谢谢。

Answer 1

在页面加载后，您的<iframe>将通过JavaScript附加到窗口文档中，请使用：

$(document).find('#postiframe').remove();

这将横穿DOM并找到新指定的<iframe>，然后按照希望从DOM中动态删除它。

如果您仍想处理<input type="button" />表单提交，请尝试<input type="submit" />来处理表单而不是<input type="submit" />，请尝试：

$('#theuploadform').submit(function(event){
    event.preventDefault();
});

相反，它将允许jQuery阻止整个表单及其所有子元素的默认行为。

上传后是否可以删除iframe

1 个答案: