将文件上传表单提交推迟到验证后

Question

可能重复：

Pause form submission for validation

这是this帖子的延续。所以基本上我是在一个iframe上传一个文件。但在提交之前，我从表单中获取数据，并使用django的内置系统检查它们的有效性(目前，它只是一个采用foo: bar的虚拟函数，并返回json = "true“)。我使用两个按钮-假可见，它调用验证和第二个隐藏，提交表单。通过下面的代码，我可以执行验证，然后当结果为正时，提交表单。现在，如果我对表单的目标进行硬编码，则不会显示我的警告，而且我很确定上传没有执行(不幸的是，每8h刷新一次上传列表，这样我就可以知道它在某个时间内是否有效)。如果未指定目标，则使用重定向上载文件，从而省略整个“提交”事件侦听器。更重要的是，整个代码在Chrome中根本不工作。在接收来自验证的响应和显示之前从未见过的响应之间，需要像2-3(查看firebug)一样。我真的很想让它发挥作用，因为我已经浪费了两天时间，而且没有任何结果。

样本链接：

http://ntt.vipserv.org/artifact/

联署材料：

<script>  
    $('#fake_upload_submit').click(function(e){
        e.preventDefault();

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

        $.ajax({
            type: "POST",
            url: '/artifact/upload/check-form/',
            data: 'foo=bar',
            dataType: "json",
            success: function(data){
                if(data['result'] == "true"){
                    $("#message").show();
                    $("#message").fadeIn(400).html('<span>'+data["message"]+'</span>');
                    setTimeout(function(){
                        $("#message").fadeOut("slow", function () {
                            $("#message").hide();
                        });
                    }, 1500);

                    fileUploadForm.submit();

                }
                else{
                    $("#message").show();
                    $("#message").fadeIn(400).html('<span">Response false</span>');
                    setTimeout(function(){
                        $("#message").fadeOut("slow", function () {
                            $("#message").hide();
                        });
                    }, 1500);                    
                    return false;
                }
            }
        });
        return false;        
    });   
</script>

html：

<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>

编辑：

IE的调试器显示Object doesn't support this property or method用于：

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

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

检查表单中的“未能加载资源”。这很有趣，因为./check/的结果是：

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

所以在我看来很好。也尝试了data.message而不是数据“消息”，但是没有什么改变。

Answer 1

也许有点烦人的解决方案，但这是joy的工作与Javascript。浏览器和服务器之间的通信完全由Javascript决定，而不是HTML。意思：

当您编写HTML时，省略操作；将提交按钮更改为常规按钮。submition.

• This

• 通过ajax运行验证(就像现在所做的那样)，如果验证成功，则调用一个新函数来管理表单表单--提交函数将显示您想要的消息，然后将操作添加到表单中，并运行form.submit();。

希望这能有所帮助

Answer 2

听着，你不必使用fileUploadForm.addEventListener("submit", function (){...}, false)。这正是$(fileUploadForm).submit(function (){...})所做的，而且它具有跨所有浏览器工作的优势。