JQuery發送帶有附件的Post Request

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未定義：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：在沒有實現接口FormData的對象上調用'append'。

Answer 1

使用以下插件，因為它允許您的submitHandler中的所有類型的數據作為本機jquery請求放置ajaxSubmit（） http://malsup.com/jquery/form/