jquery/JavaScript - 延迟到上传完成答案

【问题标题】：jquery/JavaScript - Delay until upload completejquery/JavaScript - 延迟到上传完成
【发布时间】：2011-04-27 02:28:05
【问题描述】：

我的 jQuery 脚本看起来像（表单正在提交要上传的文件）：

      $("#addMore").click(function() {
                $("#progForm").submit();
                $("#upTar").css("display","block");
                $("#title").val("");$("#obj").val("");$("#theory").val("");     $("#code").val("");$("#output").val("");$("#conc").val("");
            });

我想延迟执行从 $("#upTar") 开始的代码，直到表单提交完成（即文件已上传且 PHP 脚本已响应）。

编辑

#upTar 是一个 iframe 和表单提交的目标。我希望 #upTar 仅在从表单操作脚本生成其内容后才显示。

谢谢！

解决后的代码

 $("#addMore").click(function() {
    $("#progForm").submit();
    $('#upTar').load(function() {
        $("#upTar").css("display","block");
        $("#title, #obj, #theory, #code, #output,     #conc").val("");
       });
 });

【问题讨论】：

如果这是一个真正的表单提交，表单是否有一个“目标”属性或其他东西，以确保包含它的页面不会被服务器响应清除？如果没有，那么在页面上做任何事情都没有意义。
目标是一个 iframe (id:upTar)。
啊好的，谢谢你的澄清

标签： javascript jquery upload delayed-execution

【解决方案1】：

没有办法让浏览器中的 JavaScript “等待”任何东西。在这种情况下，您可以做几件事：

您可以将 CSS 更改等放在目标 <iframe> 的“加载”事件处理程序中

$('#upTar').load(function() {
        $("#upTar").css("display","block");
        $("#title, #obj, #theory, #code, #output, #conc").val("");
}

您可以将代码放入从<iframe> 本身执行的表单 POST 的响应中。

$(function() {
  (function($) {
        $("#upTar").css("display","block");
        $("#title, #obj, #theory, #code, #output, #conc").val("");
  })(window.parent.$);
});

【讨论】：

问题是我正在尝试上传一个文件，因为 ajax 不支持文件上传，所以会产生（伪）ajax 效果。我通过将表单提交到隐藏的 iframe 来做到这一点，然后在生成响应后取消隐藏 iframe。因此，1. iframe 必须已经加载 2. iframe 不能即时生成。
当 HTTP 响应完成时，浏览器应该在 <iframe> 上生成一个“加载”事件。你试过吗？
哦，太好了 - 我很确定它会，但我懒得用 jsfiddle 来检查 :-)

【解决方案2】：

您现在正在做的是提交 HTML 表单并加载您在表单的“action”属性中列出的任何页面。 javascript 函数的下半部分永远不会真正执行，因为浏览器将被定向到新页面。这就是你想要的，一个通过 ajax 提交然后清除表单的表单：

$("#addMore").click(function() {
    var formData = $("#progForm").serialize();
    var url = $("#progForm").attr("action");
    $.get(url, formData, function(){
        $("#upTar").css("display","block");
        $("#title").val("");
        $("#obj").val("");
        $("#theory").val("");
        $("#code").val("");
        $("#output").val("");
        $("#conc").val("");
    });
});

您是否正在寻找类似的东西？

【讨论】：

...OP 把地毯从我下面拉了出来：P
我尝试过使用类似的东西，但无济于事。而且，我猜，get方法不支持文件上传。

【解决方案3】：

如果您在 iframe 中加载 jQuery，您可以使用以下函数通过此选择器控制父元素：

$("#myparentid", top.document);

本质上，您可以在 iFrame 中运行一个等待刷新的函数，此时您可以使用 top.document 选择器运行任何您希望的函数。

【讨论】：