Передать multipart/form-data через ajax

[rafaello]

Здравствуйте! Прошу оказать помощь в решении вопроса.
Имеется форма смешанного содержимого

<form name='adminForm' id='adminForm' class='' enctype='multipart/form-data'  method='post' action='add.php'>
<input type="text" class="input-icon input-icon_email required" name="f_Email" placeholder="Email или Телефон">
<textarea class="input-icon input-icon_text required" name="f_Text" placeholder="Текст вашего сообщения "></textarea>
<input type="file" name="f_file" class="js-styler" data-placeholder="Прикрепите файл (размер до 10 мб)." data-browse="Выберите файл">
<button type="submit" id="checkvild" class="btn form-btn"><span>Отправить</span></button>
</form>

При обычной отправке на адрес add.php все работает, то есть обработчик принимает пост запрос, обрабатывает и сохраняет в базу все данные и картинки.
В связи с изменением дизайна необходимо сделать без перезагрузки, через ajax, post
Пробовал вот так

$('#adminForm').each(function() {
$form.validate({
submitHandler: function(form) {
$.ajax({
                   type: "POST",
                   url: "/netcat/add.php",
                   contentType: 'multipart/form-data',
                   data: $(form).serialize(),
                   processData: false,
                   contentType: false
                                  }).done(function() {
                                  form.reset();
                                  $form.next('.js-form-success').show();
                }); } }); });

и так

$('#adminForm').each(function() {
$form.validate({
submitHandler: function(form) {
$.ajax({
                   type: "POST",
                   url: "/netcat/add.php",
                   contentType: 'multipart/form-data',
                   data: new FormData($(form)),
                   processData: false,
                   contentType: false
                                  }).done(function() {
                                  form.reset();
                                  $form.next('.js-form-success').show();
                }); } }); });

не получается в обоих случаях.
$form.next('.js-form-success').show(); выполняется, но POST запрос в базу данных не сохраняется.

[laimas]

$('#adminForm').each(function() {

А это зачем?

[rafaello]

Это так написал тот человек, который делал новый дизайн.

$('#adminForm').each(function() {
	$form.validate({
//....
//.... здесь идет код проверки валидации формы на заполненность полей
//....
	submitHandler: function(form) {
$.ajax({
	                   type: "POST",
	                   url: "/netcat/add.php",
	                   contentType: 'multipart/form-data',
	                   data: $(form).serialize(),
	                   processData: false,
	                   contentType: false
	                                  }).done(function() {
	                                  form.reset();
	                                  $form.next('.js-form-success').show();
	                }); } }); });

[rafaello]

то есть он писал код для обычной формы, без полей типа файл. И обычная форма работает. А при добавлении поля типа файл - не работает.

[rafaello]

то есть надо как бы заодно и проверить валидность заполнения полей и отправить пост запрос с полями, среди которых есть тип файл.

[laimas]

$('#adminForm').each(function() {

Это для одной формы с уникальным ID полнейшая глупость. Обрабатывать нужно событие onsubmit, в котором отменять действие по умолчанию, а данные отправляемые формой, это будет new FormData(this). Ни кто не будет сериализовать бинарные данные.

то есть обработчик принимает пост запрос, обрабатывает и сохраняет в базу все данные и картинки.

И изображения в базу?

[rafaello]

получается у меня есть два типа форм, одни без типа файл, другие с типом файл. Для одних один id для други другой id.
Если я правильно понял, надо прописать действие onsubmit , верно?
.... а на ваш вопрос по поводу картинок - обработчик, если напрямую отправлять, без jquery, то он выдает ссылку на сохраненный файл

[Nexus]

Это для одной формы с уникальным ID полнейшая глупость.

Иногда подобное бывает очень удобным, не нужно сохранять ссылку на элемент, чтобы с ним взаимодействовать.

rafaello, так пробовали?

$('#adminForm').each(function() {
    $form.validate({
        submitHandler: function(form) {
            $.ajax({
                type: "POST",
                url: "/netcat/add.php",
                data: new FormData(form),
                processData: false,
                contentType: false
            }).done(function() {
                form.reset();
                $form.next('.js-form-success').show();
            });
        }
    });
});

[laimas]

contentType: 'multipart/form-data'

processData: false,
contentType: false

Иначе тип не не будет соответствующим.

[laimas]

получается у меня есть два типа форм, одни без типа файл, другие с типом файл. Для одних один id для други другой id.

Ну допустим, а зачем?