推迟文件上传表单提交,直到验证为止

Question

可能重复:
暂停表单提交以进行验证

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

示例链接:

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

JS:

<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-form /的结果是:

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

所以看起来很好.尝试了data.message而不是数据["message"],但没有任何变化.

Answer 1

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

• 当您编写 HTML 时，请省略操作；将提交按钮更改为常规按钮。
• 通过 ajax 运行验证（就像现在所做的那样），如果验证成功，则调用一个新函数来管理表单提交。
• 这个表单提交函数将显示您想要的消息，然后将操作添加到表单中，然后运行form.submit();

希望这可以帮助