Javascript 对于不加载页面而是提供文件的表单，如何检测表单提交何时完成？

当我有一个我知道需要一段时间才能提交的表单时，我喜欢在submit事件上显示一个加载指示器，这样它就会显示出来，然后在新页面加载时被清除，就像这样简单

$('#theForm').submit(function () {
    $('#loaderContainer').html('<img src="loader.gif" id="loadingGIF" />');
});

$（'theForm'）。提交（函数（）{
$（'#loaderContainer'）.html（''）；
});

我遇到的问题是，我正在尝试对一个表单执行此操作，该表单在提交时不会离开页面，它只是提供一个文件。我在php中呈现一个csv，并提供它。它需要几秒钟的时间 一分钟内完成它。当这种情况发生时，您永远不会离开页面，因此没有任何东西可以触发加载程序离开。我想我可以提交一个iframe，然后用iframe的onLoad事件杀死加载程序：

<form action="/makeCSV" method="POST" target="iframe">


<iframe id="iframe" name="iframe"></iframe>

$("#iframe").load(function () {
    $("#loadingGIF").remove();
});

$（“#iframe”）.load（函数（）{
$（“#加载GIF”）.remove（）；
});

但我猜，因为它只是提供一个文件，而不是加载一个页面，所以onload事件不会触发

如果我有一个表单正在提供一个文件，而不是导航到一个新页面，有没有办法检测到该文件已被提供

如果有帮助，csv呈现代码如下：

    <?php
    //do some stuff to generate a csv...
    $csv="heading1, heading2, heading3, heading4 \r\n";
    $csv.="value1, value2, value3, value4 \r\n";
    $csv.="a,b,c,d \r\n";
    //...
    header('Pragma: public');
    header('Expires: 0');
    header('Cache-Control: must-revalidate, post-check=0, pre-check=0');
    header('Cache-Control: private', false);
    header('Content-Type: text/csv');
    header("Content-Disposition: attachment;filename=\"file.csv\"");
    echo $csv;
    exit;
    ?>

---

我将采用两步流程—通过ajax提交表单、构建csv、另存为临时文件并返回标识符。然后将iframe设置为请求该文件，并在该请求的处理程序中，服务然后删除该文件：

$('#form').submit(function(ev){
    ev.preventDefault();
    $('#loaderContainer').html('<img src="loader.gif" id="loadingGIF" />');
    $.post('createfile.php', $(this).serialize(), function(resp){
         var identifier = resp.intentifier;
         $('iframe').attr('src', 'servefile.php?i='+identifier);
         $('#loaderContainer').html('<!-- -->');
    }
}

---

既然您已经在使用JQuery，我建议您使用已经以紧凑/可靠的方式解决了这个问题的东西。我建议试一试

---

这让我想到了它。这可能正是您所需要的，它只是一个插件，您可以将其放到您的项目中并进行测试：）祝您好运。

您可以检查窗口是否失去焦点。。。非常基本，但适合我的需要

$([window, top.window]).blur(function() {
    $('BUTTON.btnLoading').removeClass('btnLoading');
});

---

. 用饼干做的把戏效果很好。@Pointy饼干把戏看起来很棒！好主意。我曾想过投票……但我不知道是什么。“那太好了！”chiliNUT自从Crowder先生给出这个答案以来，我基本上一直在使用它，我从来没有遇到过问题。我通常让JavaScript代码组成一个随机数，并将其与表单一起发布，然后服务器端代码将该随机数作为值发送回cookie。这样就避免了旧cookie被卡住的潜在问题。由于Cookie出现在响应的标题中，通常情况下，在浏览器的文件处理对话框弹出之前，您的“加载…”功能就会消失（尽管这不是非常重要）。@Pointy，工作非常出色

//servefile.php
$identifier = $_GET['identifier'];
$file = 'somedir/' .$identifier .'.tmp'
//output correct headers here
readfile($file);
unlink($file);

$([window, top.window]).blur(function() {
    $('BUTTON.btnLoading').removeClass('btnLoading');
});