Jquery 推迟文件上传表单提交，直到其生效

可能重复：

这是这篇文章的延续。基本上我是在iframe中上传一个文件。但在提交之前，我从表单中获取数据，并使用django的内置系统检查它们的有效性（目前它只是一个伪函数，接受foo:bar，并返回json result=“true”）。我使用两个按钮——伪可见按钮和第二个隐藏按钮，分别调用验证和提交表单。使用下面的代码，我能够执行验证，然后当结果为肯定时，提交表单。现在，如果我为表单硬编码目标，我的警报不会显示，并且我非常确定上传没有执行（不幸的是，上传列表每8小时刷新一次，所以我将知道它是否在某个时间内工作）。如果未指定目标，则会上载带有重定向的文件，从而省略整个“提交”事件侦听器。而且，整个代码在Chrome中根本不起作用。在接收验证响应和显示之前我从未见过的响应之间需要2-3秒的时间（查看firebug）。我真的很想让它发挥作用，因为我已经浪费了2天，而且没有任何结果

示例链接：

JS:

因为使用了addEventListener，但没有更多错误。萤火虫是干净的。镀铬：

检查表单中的“加载资源失败”。这很有趣，因为…/check form/处的结果是：

{
message: "Response = True"
result: "true"
}

---

所以我觉得很好。还尝试了data.message而不是data[“message”]，但没有任何变化。

可能是一个有点烦人的解决方案，但这就是使用Javascript的乐趣。 让浏览器和服务器之间的通信完全由Javascript完成，而不是HTML。意思是：

• 当你写HTML时，省略动作；将提交按钮更改为常规按钮
• 通过ajax运行验证（现在已经完成），如果验证成功，则调用一个新函数来管理表单提交
• 此表单提交函数将显示您想要的消息，之后将向表单添加操作，并将运行

  form.submit（）

---

希望这有帮助看，你不必使用

fileUploadForm.addEventListener（“submit”，function（）{…}，false）

。这正是

$（fileUploadForm）.submit（function（）{…}）

所做的，它具有跨所有浏览器工作的优势。

现在就按您的方式完成了。在chrome中仍然不起作用。但我很确定它现在在ff中起作用了。

<div id="message" style="background:black; width:400px; height:80px; display:none; color:white;">
</div>
<h1>Submit</h1>
<form action="{{upload_url}}" method="POST" target="" id="file_upload_form" enctype="multipart/form-data">
    {% render_upload_data upload_data %}
    <table>{{ form }}</table>    
    <p>
        <input type="hidden" maxlength="64" name="myfileid" value="{{ myfileid }}" >
    </p>
    <p>
        <input type="submit" style="display:none" id="true_upload_submit" value="Submit" />
    </p>    
    <iframe id="upload_target" name="upload_target" src="" style="width:0;height:0;border:0px solid #fff;"></iframe>
</form>
    <p>
        <input type="submit" id="fake_upload_submit" value="Submit" />
    </p>

    fileUploadForm.addEventListener("submit", function() {
        alert("sent in iframe");
        fileUploadForm.target = 'upload_target';
    }, false);

{
message: "Response = True"
result: "true"
}