javascript - JQuery 发送带有附件的 Post 请求

Question

我有表单文件输入(只有 1 个文件)所以要提交它我试过这个:

$("#addBrand").validate({
        rules: {
            brandName: "required",
            brandLogo: "required"

        },
        messages: {
            brandName: "Please enter the brand name",
            brandLogo: "Please add brand Logo"

        },
        errorElement: 'p',
        errorClass: 'help-block',
        errorPlacement: function(error, element) {
            if(element.parent('.form-group').length) {
                error.insertAfter(element.parent());
            } else {
                error.insertAfter(element);
            }
        },
        highlight: function(element) {
            $(element).closest('.form-group').addClass('has-error');
        },
        unhighlight: function(element) {
            $(element).closest('.form-group').removeClass('has-error');
        },

        submitHandler: function(form, event) {
                run_waitMe();
                var $form = $(form);
                event.preventDefault(); //keeps the form from behaving like a normal (non-ajax) html form
                var url = $form.attr('action');
                var data = new formData();
                data.append ('brandName', $('#brandName').val());
                data.append('brandLogo', $('#brandLogo')[0].files[0] );
                $.post(url, data, function(response) {
                    //handle successful validation
                    $('.wrapper').waitMe('hide');
                    if (response["fail"] == true) {
                        var errors = response['errors'];
                        for (var key in errors) {
                            if (errors.hasOwnProperty(key)) {
                                var field = errors[key];
                                for ( var i = 0; i < field.length; i++) {
                                    var $input = $form.find('#' + key );
                                    ($input.parent().find("p")).remove();
                                    $input.parent().parent().removeClass( "has-error" );
                                    $input.parent().parent().addClass( "has-error" );
                                    $input.after('<p id="'+ key + '-error" class="help-block">'+ field[i]+'</p>');

                                }
                            }
                        }

                    } else {
                        $('.wrapper').waitMe('hide');
                        $('#addBrand').modal('hide');
                        $(".combobox").prepend("<option value='"+response['objectId']+"' selected='selected'>"+ response['objectName']+"</option>");
                        console.log("<option value='"+response['objectId']+"' selected='selected'>"+ response['objectName']+"</option>");
                    }
                }).fail(function(response) {
                    //handle failed validation
                    $('.wrapper').waitMe('hide');
                    console.log("Failed");

                });
        }
    });

使用这段代码我得到了这个错误:

formData is not defined : var data = new formData();

我也尝试过这样的事情:

submitHandler: function(form) {
            $('#addBrand').unbind('submit').bind('submit', function(e){
                run_waitMe();
                var $form = $(this);
                e.preventDefault(); //keeps the form from behaving like a normal (non-ajax) html form
                var url = $form.attr('action');
                var data = new FormData();
                data.append ('brandName', $('#brandName').val());
                data.append('brandLogo', $('#brandLogo')[0].files[0] );

                $.post(url, data, function(response) {
                    //handle successful validation
                    $('.wrapper').waitMe('hide');
                    if (response["fail"] == true) {
                        var errors = response['errors'];
                        for (var key in errors) {
                            if (errors.hasOwnProperty(key)) {
                                var field = errors[key];
                                for ( var i = 0; i < field.length; i++) {
                                    var $input = $form.find('#' + key );
                                    ($input.parent().find("p")).remove();
                                    $input.parent().parent().removeClass( "has-error" );
                                    $input.parent().parent().addClass( "has-error" );
                                    $input.after('<p id="'+ key + '-error" class="help-block">'+ field[i]+'</p>');

                                }
                            }
                        }

                    } else {
                        $('.wrapper').waitMe('hide');
                        $('#addBrand').modal('hide');
                        $(".combobox").prepend("<option value='"+response['objectId']+"' selected='selected'>"+ response['objectName']+"</option>");
                        console.log("<option value='"+response['objectId']+"' selected='selected'>"+ response['objectName']+"</option>");
                    }
                }).fail(function(response) {
                    //handle failed validation
                    $('.wrapper').waitMe('hide');
                    console.log("Failed");

                });
            });
        }

但是我得到这个错误:

TypeError: 'append' called on an object that does not implement interface FormData.

Answer 1

使用以下插件，因为它允许所有类型的数据作为本地 jquery 请求在您的 submitHandler 中放置 ajaxSubmit() http://malsup.com/jquery/form/