JQuery отправки сообщения запроса с вложенным файлом

Question

я получил входной файл формы (только один файл) так, чтобы представить его, я попытался это:

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