ajax не отправляет данные на php

Question

Я хочу отправить FormData с использованием AJAX в мой PHP-файл, но когда я нажимаю на кнопку, появляется ошибка undefined index fname.

<form id="myForm" method ="post" enctype="multipart/form-data"> 
    First Name: <input type="text" name="fname" id="fname" /> <br> 
    Last Name: <input type="text" name="lname" id="lname" /> <br> 
    Email: <input type="text" name="email" id="email" /> <br> 
    Image: <input type="file" name="image" id="image" /> <br> 
    <button type="button" name="btnSubmit" id="btnSubmit"> Submit </button> 
</form> 

<script language="javascript" src="js/jquery-1.9.1.min.js"></script> 
<script language="javascript" src="js/jquery.form.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function(){ 
    //alert(4); 
    $("#btnSubmit").click(function(){ 
     var formData = new FormData($("#myForm")); 
     alert(formData); 
     console.log(formData); 
     $.ajax({ 
      type: 'POST', 
      url: 'learn_form2.php', 
      data: formData, 
      success: function (data) { 
       alert(data); 
      }, 
      cache: false, 
      contentType: false, 
      processData: false 
      }); 
     }); 
    }); 
</script> 

<?php 
    echo $_REQUEST['fname']; 
?> 

Пожалуйста, помогите

Answer 1

Вы должны contruct FormData используя форму DOM элемент, а не объект JQuery. Что-то вроде этого

new FormData($("#myForm")[0]); 

Было бы также устранить проблемы ПОТЕНЦИАЛА для реализации обработчика ошибок на вашем Ajax вызова.

Answer 2

Отметьте, что FormData ожидает form DOMElement, а не объект jQuery. Также обратите внимание, что вы должны привязать к событию submit самого form, а не нажатию кнопки отправки. Это позволяет предотвратить стандартную подачу формы. Попробуйте это:

$("#myForm").submit(function(e) { 
    e.preventDefault(); // stop standard form submission 

    var formData = new FormData(this); // give the form DOMElement to FormData 
    $.ajax({ 
     type: 'POST', 
     url: 'learn_form2.php', 
     data: formData, 
     success: function (data) { 
      alert(data); 
     }, 
     cache: false, 
     processData: false 
    }); 
});