Форма обратной связи и файл ajax?

Question

[NeveR3d]

Не могу понять, почему файл не отправляется через ajax

$("#feedback-form").submit(function() {
		var str = $(this).serialize();
		$.ajax({
			type: "POST",
			url: "contact.php",
			data: str,
			success: function(msg) {
				if(msg == 'ok') {
					$('.close, .overlay').css('opacity','1');
					$('.close, .overlay').css('visibility','visible');
					$('.close, .overlay').css('display','block');
					$('#page-input').css({'opacity':'0','visibility':'hidden'});
				}
				else {
					$('.close .window').html('<h5>Ошибка</h5><p>Сообщение не отправлено, убедитесь в правильности заполнение полей</p>');
					$('.close, .overlay').css('opacity','1');
					$('.close, .overlay').css('visibility','visible');
					$('.close, .overlay').css('display','block');
					$('#page-input').css({'opacity':'0','visibility':'hidden'});
				}
			}
		});
		return false;
	});

Comments

[link_irk]

Вы отправляете строку, а не файл.

[NeveR3d]

link_irk: а как файл отправить

Answer 1

[Максим]

Как-то так:

$("#feedback-form").submit(function(event) {
    event.preventDefault();
    var data = new FormData;

    $.each($('[type="file"]').prop('files'), function (k, v) { // Добавляем файлы
        data.append('fileFF[]', files[k]);
    });

    $.each($('form')[0], function (k, v) { // Добавляем все поля, кроме файлов
        var title = $(this).closest('form')[0][k].name;
        if (title != 'files') {
            data.append(title, $('form')[0][k].value);
        }
    });

    $.ajax({
      type: "POST",
      url: "contact.php",
      data: data,
      processData: false,
      contentType: false,
      success: function(msg) {
        if(msg == 'ok') {
          $('.close, .overlay').css('opacity','1');
          $('.close, .overlay').css('visibility','visible');
          $('.close, .overlay').css('display','block');
          $('#page-input').css({'opacity':'0','visibility':'hidden'});
        }
        else {
          $('.close .window').html('<h5>Ошибка</h5><p>Сообщение не отправлено, убедитесь в правильности заполнение полей</p>');
          $('.close, .overlay').css('opacity','1');
          $('.close, .overlay').css('visibility','visible');
          $('.close, .overlay').css('display','block');
          $('#page-input').css({'opacity':'0','visibility':'hidden'});
        }
      }
    });
    return false;
  });

Comments

[NeveR3d]

Не работает теперь модальное окно(

[NeveR3d]

Вот сама кнопка

<input class="igroup-input" type="file" name="fileFF[]" multiple id="fileFF" accept="image/*">

[Максим]

NeveR3d: Что именно не работает?

[NeveR3d]

ну запятую я поставил в contentType: false
Но при заполнении формы и нажатии отправить, страница просто перезагружается

[Максим]

Для отмены стандартного действия (отправки формы) используйте event.preventDefault();

[NeveR3d]

Максим: он в вашем скрипт и есть, только он не корректно пашет. Вернее вообще не отправляет

[NeveR3d]

Вот так сама строка form
<form class="fofm" action="" id="feedback-form">
В консоле ошибка

Uncaught ReferenceError: files is not defined

Жалуется на data.append('fileFF[]', files[k]);

[Максим]

NeveR3d: files здесь должно быть равно примерно этому: `$('[type="file"]').prop('files')`