Не получается отправить форму через ajax

Question

Есть такой код:

$('#form').submit(e => {
	e.preventDefault();
  
  $.post(e.target.action, new FormData(e.target), result => {
  	console.log(result);
  }, e.target.enctype);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form id="form" action="https://example.com" method="post" enctype="multipart/form-data">
  <input type="file" name="file" onchange="document.getElementById('form').submit()" />
</form>

То есть есть файловый инпут на форме. Надо чтобы форма отправлялась при выборе файла (сделал в событии onchange). Но отправить надо ajax-запросом (чтобы страница не перезагружалась). Не получается... В событие submit почему-то не заходит вообще.

Еще пытался вот так:

$('#importExcelFileInput').change(e => {
    const form = document.getElementById('importExcelForm');

    $.post(form.action, new FormData(form), result => {
        console.log(result);
    });
});

Но тогда при запросе выкидывает ошибку jquery.js:4 Uncaught TypeError: Illegal invocation. Вообще не понимаю что это значит...

Answer 1

У вас две ошибки:

document.getElementById('form').submit() - не вызывает событие onsubmit. Если вы используете jquery - можно воспользоваться функцией trigger.
Не правильно отправляете файл. Отправка через post функцию в jquery предпологает отправку JSON, он пытается сконвертировать файл в JSON, поэтому ошибка Illegal invocation.

Посмотрите работающий пример.

$('#form').submit(e => {
  e.preventDefault();
  const formData = new FormData(e.target);
  $.ajax({
    url: e.target.action,
    type: "POST",
    data: formData,
    success: function(data) {
      console.log(result);
    },
    error: function(error) {
      console.log('error');
    },
    contentType: false,
    processData: false,
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>

<form id="form" action="https://example.com" method="post" enctype="multipart/form-data">
  <input type="file" name="file" onchange="$('#form').trigger('submit')" />
</form>

БЛОГ НА HUSL

Не получается отправить форму через ajax

Ответы (1 шт):