JQuery send message with attached file

I got a form input file (only 1 file) to submit. I've tried this:

$("#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");

                });
        }
    });

      

With this code I am getting this error:

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

Also I tried something like this:

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");

                });
            });
        }

      

but I am getting this error:

TypeError: 'append' invokes an object that does not implement the FormData interface.

+3


source to share


1 answer


use the following plugin as it allows all datatypes as native jquery request in your submitHandler put ajaxSubmit () http://malsup.com/jquery/form/



0


source







All Articles