it-roy-ru.com

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

Это, возможно, задавали раньше, но у меня есть поиск здесь и в 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 />";
8
Alex Clark

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

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

измените кнопку типа 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)

1
Aditya Vikas Devarapalli

Эта линия

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

Должно быть

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