Почему ajax не работает с предзагрузкой файла картинок FileReader?

Question

[ligisayan]

Всем привет!

Есть форма, в которой с помощью поля input[type="file"] отправляю картинку, которую предварительно предзагружаю в превью.
Для этого использую возможность FileReader

Отправка работает отлично до тех пор пока не пробую подключить ajax.
Все данные отправляются за исключением картинки. Как можно это решить?

UDP Без предпросмотра ajax передает картинку без проблем

$(document).on('submit', '#commentform', function(e) {
  e.preventDefault();
  var filter = $(this);
  $.ajax({
    url: filter.attr('action'),
    data: filter.serialize(),
    type: filter.attr('method'),
    success: function(data) {
      $('#review-thanks').addClass('active');
    },
    error: function() {}
  });
});
$('#comment-icon input[type="file"]').on('change', function() {

  if (typeof(FileReader) != "undefined") {

    var image_holder = $("#comment-icon .acf-label label");
    image_holder.empty();

    var reader = new FileReader();
    reader.onload = function(e) {
      $("<img />", {
        "src": e.target.result,
        "class": "circle",
        "width": "43px",
        "height": "43px"
      }).appendTo(image_holder);

    }
    image_holder.show();
    reader.readAsDataURL($(this)[0].files[0]);
    $('#comment-icon .acf-basic-uploader').addClass('change');
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="https://wp-credit7-ua.test/wp-comments-post.php" method="post" id="commentform" class="" enctype="multipart/form-data">
  <div id="comment-icon" class="acf-field acf-field-image acf-field-5f5634ad8ebb3" data-name="comment-img" data-type="image" data-key="field_5f5634ad8ebb3">
    <div class="acf-label">
      <label>Ваше фото:</label></div>
    <div class="acf-input">
      <div class="acf-image-uploader" data-preview_size="reviews" data-library="all" data-mime_types="" data-uploader="basic">
        <input type="hidden" name="acf[field_5f5634ad8ebb3]" value="">
        <div class="hide-if-value">
          <label class="acf-basic-uploader">
                <input type="file" name="acf[field_5f5634ad8ebb3]" id="acf-field_5f5634ad8ebb3"></label>
        </div>
      </div>
    </div>
  </div>
  <p class="form-submit"><input name="submit" type="submit" id="submit" value="Отправить"> <input type="hidden" name="post_ID" value="606" id="post_ID">
    <input type="hidden" name="parent" id="parent" value="0">
  </p>
</form>

Answer 1

[Надим]

Удалите этот код:

$(document).on('submit', '#commentform', function(e) {
  e.preventDefault();
  var filter = $(this);
  $.ajax({
    url: filter.attr('action'),
    data: filter.serialize(),
    type: filter.attr('method'),
    success: function(data) {
      $('#review-thanks').addClass('active');
    },
    error: function() {}
  });
});

Вместо него используйте чистый JavaScript:

// По готовности страницы, вешаем на форму обработчик onsubmit инлайново:

document.addEventListener('DOMContentLoaded', function() {
	document.querySelector('form#commentform').setAttribute('onsubmit', 'event.preventDefault(); form_send(this);');
});

// Функция для отправки формы на чистом JavaScript:

function form_send(form) {
	form.setAttribute('onsubmit', 'event.preventDefault();');
	var url = form.getAttribute('action') + '?nocache=' + new Date().getTime();
	var xhr = new XMLHttpRequest(); xhr.open('POST', url);
	xhr.onreadystatechange = function() {
		if (xhr.readyState === XMLHttpRequest.DONE) {
			form.setAttribute('onsubmit', 'event.preventDefault(); form_send(this);');
			if (xhr.status === 200) {
				document.querySelector('#review-thanks').classList.add('active');
				alert('Форма успешно отправлена, ответ сервера: ' + xhr.responseText);
			}
			else {
				console.log('При отправке формы произошла ошибка, ниже объект с деталями ошибки:');
				console.dir(xhr);
				alert('При отправке формы произошла ошибка, детали смотрите в консоли.');
			}
		}
	}
	xhr.send(new FormData(form));
}

Алерты по желанию можете убрать.

Comments

[ligisayan]

Надим Закиров Спасибо, но ошибка в этой строке - не хватает параметра

form.setAttribute('event.preventDefault(); form_send(this);');

Uncaught TypeError: Failed to execute 'setAttribute' on 'Element': 2 arguments required, but only 1 present.
at XMLHttpRequest.xhr.onreadystatechange

[Надим]

ligisayan, действительно, поправил. Берите выше исправленный код.

[ligisayan]

Надим Закиров, спасибо - помогло! А здесь дело в чистом javascript против jquery или в использовании FormData ?

[Надим]

ligisayan, здесь дело именно в FormData. Если скормить конструктору FormData ссылку на форму, мы получим специальный объект содержащий все значения всех полей, включая файлы, а вот jQuery функция serialize() собирает только данные с полей ввода, файлы он сериализовать не умеет, поэтому они у вас и не отправлялись. В теории, если вам сильно надо, то можно отправить форму и через jQuery:

$(document).on('submit', '#commentform', function(e) {
  e.preventDefault();
  var filter = $(this);
  $.ajax({
    url: filter.attr('action'),
    data: new FormData(filter[0]),
    type: filter.attr('method'),
    success: function(data) {
      $('#review-thanks').addClass('active');
    }
  });
});

Тоже в принципе должно работать, но лично я предпочитаю использовать чистый JavaScript.