Передача данных и файла формы в php с помощью ajax

Question

Возможно, это было задано раньше, но у меня есть поиск здесь и в Google, и каждый ответ, который я прочитал, не работает.

Вопрос, который я должен решить, заключается в создании формы с именем, фамилией, электронной почтой и изображением. Затем передайте данные в базу данных и загрузите файл также в базу данных. В настоящее время мой код ничего не делает после нажатия кнопки. Перед тем, как добавить файл, он будет вставлять данные в мою базу данных.

HTML

<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> 

AJAX/JS

$("#btnSubmit").click(function(){ 
    var formData = new FormData($(this)[0]); 
    $.ajax({ 
     type: 'POST', 
     url: 'form2.php', 
     data: formData, 
     success: function (data) { 
      alert(data) 
     }, 
     }); 
    }); 

PHP

$upload = basename($_FILES['image']['name']); 
$type = substr($upload, strrpos($upload, '.') + 1); 
$size = $_FILES['image']['size']/1024; 

if ($_FILES["image"]["error"] > 0) 
{ 
    echo "Error: " . $_FILES["image"]["error"] . "<br>"; 
} 
else 
{ 
    echo "Upload: " . $upload . "<br>"; 
    echo "Type: " . $type . "<br>"; 
    echo "Size: " . $size . " kB<br>"; 
} 

$fname = $_POST['fname']; 
$lname = $_POST['lname']; 
$email = $_POST['email']; 
echo "You Entered <br />"; 
echo "<b>First Name:</b> ". $fname . "<br />"; 
echo "<b>Last Name:</b> ". $lname . "<br />"; 
echo "<b>Email:</b> ". $email . "<br />"; 

Answer 1

формы по умолчанию представить, где they'r сказал. Чтобы остановить это, вам нужно предотвратить это. Ваш JS должен выглядеть следующим образом:

$("form#data").submit(function(event){ 
    event.preventDefault(); 
    ... 
}); 

Answer 2

Эта линия

if ($_FILES["file"]["error"] > 0) 

Должно быть

if ($_FILES["image"]["error"] > 0) 

Answer 3

изменить кнопку submit типа для button типа, а затем использовать AJAX, как это:

<button type="button" name="btnSubmit" id="btnSubmit"> Submit </button> 

вам нужно изменить Jquery код для:

$("#btnSubmit").click(function(){ 
    var formData = new FormData($("#myForm")); 
    $.ajax({ 
     type: 'POST', 
     url: 'form2.php', 
     data: formData, 
     success: function (data) { 
      alert(data) 
     }, 
     }); 
    }); 

, а также изменить код здесь if ($_FILES["file"]["error"] > 0) к if ($_FILES["image"]["error"] > 0)