使用 jQuery 防止默认和提交表单答案

【问题标题】：Preventdefault and submitting form with jQuery使用 jQuery 防止默认和提交表单
【发布时间】：2013-04-17 06:36:49
【问题描述】：

我在 jQuery 中提交火有问题：

$(document).ready(function() {
                    $('#zestaw-edytuj-form').submit(function(e) {
                        e.preventDefault();
                        $('#ip_dilmarbundle_zestawytype_path').uploadify('upload');
                    });

                    $('#ip_dilmarbundle_zestawytype_path').uploadify({
                        'swf'      : '{{ asset("js/uploadify/uploadify.swf") }}',
                        'uploader' : '{{ path('upload-image') }}',
                        'folder'   : '{{ asset("images") }}',
                        'auto'     : false,
                        'onUploadSuccess' : function(file,data,response) {
                            $('#ip_dilmarbundle_zestawytype_zdjecie').attr('value',file.name);

                        },
                        'onUploadComplete' : function(file) {
                            $('#zestaw-edytuj-form').submit();
                        },
                        'onUploadError' : function(file, errorCode, errorMsg, errorString) {

                        },
                    });
                });

首先，点击提交按钮后，我需要阻止默认设置并上传图片。上传完成后（onUploadComplete）我需要正常提交表单。但是当图片上传时，提交不会触发。我能用它做什么？

【问题讨论】：

在'onUploadError : func(){},' 的结尾处有一个尾随,

标签： jquery forms submit uploadify preventdefault

【解决方案1】：

试试这个：

已编辑：也修复了这个问题：尾随，位于 'onUploadError : func(){},' 的结尾处

$(document).ready(function() {
    var ready = false;

$('#zestaw-edytuj-form').submit(function(e) {
    if(!ready){
        e.preventDefault();
        $('#ip_dilmarbundle_zestawytype_path').uploadify('upload');
    }
});

$('#ip_dilmarbundle_zestawytype_path').uploadify({
    'swf'      : '{{ asset("js/uploadify/uploadify.swf") }}',
    'uploader' : '{{ path('upload-image') }}',
    'folder'   : '{{ asset("images") }}',
    'auto'     : false,
    'onUploadSuccess' : function(file,data,response) {
        $('#ip_dilmarbundle_zestawytype_zdjecie').attr('value',file.name);

    },
    'onUploadComplete' : function(file) {
        ready = true;
        $('#zestaw-edytuj-form').submit();
    },
    'onUploadError' : function(file, errorCode, errorMsg, errorString) {

    }
});
});

【讨论】：

【解决方案2】：

我相信您在这里有一个提交循环的公式，如果它可以工作的话。几个建议。您可以将表单分成两种形式（单独的表单标签），一种用于文件上传，另一种用于输入数据。文件上传完成后，提交数据表单。然而，最好的方法可能是使用uploadify，您可以发送其他附加数据作为参数，以便您处理文件上传的同一脚本也可以处理传入数据。你可以得到像var myform = $(this).serializeArray() 这样的表单参数，我相信参数是formData，所以你可以在uploadify() 配置参数中设置它'formData':myform。（参考：Uploadify 网站现已关闭http://www.uploadify.com/documentation/uploadify/formdata/。

【讨论】：