Почему не отправляется форма через ajax, не передается изображение?

Question

[Петро Бойко]

Суть вопроса такова через форму не передается изображение , текст передается

<form id="myform"  action='' method='post' enctype="multipart/form-data">	
		  <input type="hidden" name="action" value="do">
		  
		<input type="text"  name="text"/>
		
        <input type="file" name="file"  />

		<input type="submit" id="btncontcall" value=" Ok "/>		

      </form>

$(document).ready(function() {
         $('#btncontcall').click(function(){ 
              $.ajax({
                 type: "POST",
                 url:"bot_send.php", // Адрес обработчика
                 data:$('#myform').serialize(),
                 error:function(){$("#erconts").html("<span class='erconts'>Ошибка!</span>");},
         		beforeSend: function() {
                     $("#erconts").html("<span class='erconts'>Отправляем...</span>");
                 },
         		success: function(result){
					$('#myform')[0].reset();
         			$('#erconts').html(result);
         			checkThis();
         		}
             });
             return false;
         });
		});

Answer 1

[inkShio]

Метод .serialize() возвращает строку пригодную для передачи через URL строку. Данные могут собираться с многих объектов jQuery, включая input, textarea, и select. Гугли FormData

Answer 2

[zkrvndm]

Вот эту конструкцию в коде:
$('#myform').serialize()
Замени на:
new FormData($('#myform')[0])
И тогда все заработает.

Comments

[Петро Бойко]

не отправляет так

[zkrvndm]

Петро Бойко, напомните завтра, скину пример на базе fetch.

Answer 3

[Петро Бойко]

Так сработало

(function ($) {
$("#myform").submit(function (event) {
  event.preventDefault();
  $.ajax({
    url: "/bot_send.php",
    type: "POST",
    data: new FormData($('#' + $(this).attr('id'))[0]),
    processData: false,
    contentType: false,
                 error:function(){$("#erconts").html("<b style='color: red;'>Сталася помилка!</b>");},
         		beforeSend: function() {
                     $("#erconts").html("<b>Відправляєм дані...</b>");
                 },	
         		success: function(result){
					$('#myform')[0].reset();
         			$('#erconts').html(result);
         			checkThis();
         		},
      });

});
  
}(jQuery));

       $("#answer").keyup(function(event){
    if(event.keyCode == 13){
        $("#btncontcall").click();
       } });

Comments

[zkrvndm]

У тебя тут кое что лишне, замени это:
new FormData($('#' + $(this).attr('id'))[0])
На вот это:
new FormData(this)
Суть от этого не изменится.

Оба варианта возвращают одну и ту же форму.