1

我目前在 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(); 如果我删除底部的 return 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>

所以总结一下我的问题：

  1. 上传后 iframe 复制到“textarea”后是否可以删除
  2. 如果是这样 $("#postiframe").remove 不起作用
  3. 有谁知道为什么当我删除返回 false 时，它​​会重新加载页面而不是使用 event.preventDefault(); 一开始

先感谢您。

4

1 回答 1

2

页面加载后，您<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 阻止整个表单及其所有子元素的默认行为。

于 2013-08-22T15:46:15.833 回答