@ligisayan

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

Всем привет!

Есть форма, в которой с помощью поля 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>
  • Вопрос задан
  • 37 просмотров
Решения вопроса 1
@zkrvndm
Боты, парсеры, расширения
Удалите этот код:
$(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));
}

Алерты по желанию можете убрать.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы