关于javascript:使用ajax将表单数据和文件传递给php

Passing form data and file to php using ajax

本问题已经有最佳答案,请猛点这里访问。

这可能是以前问过的,但我在这里和谷歌上搜索过,我读过的每个答案都不起作用。

我要解决的问题是制作一个有名字、姓氏、电子邮件和图像的表单。然后将数据传递到数据库中,并将文件也上载到数据库中。目前,我的代码在我按Submit之后没有任何作用。在添加文件框之前,它会将数据插入到我的数据库中。

HTML

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

AJAX/JS

1
2
3
4
5
6
7
8
9
10
11
$("#btnSubmit").click(function(){
     var formData = new FormData($(this)[0]);
     $.ajax({
        type: 'POST',
        url: 'form2.php',
        data: formData,
         success: function (data) {
           alert(data)
         },
      });
  });

PHP

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
$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"] ."";
}
else
{
    echo"Upload:" . $upload ."";
    echo"Type:" . $type ."";
    echo"Size:" . $size ." kB";
}

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


submit类型按钮更改为button类型,然后使用ajax,如下所示:

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

您需要将jquery代码更改为:

1
2
3
4
5
6
7
8
9
10
11
$("#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)


默认情况下,表单将提交到他们被告知的任何位置。为了阻止这种情况,你需要阻止它。您的JS应该如下所示:

1
2
3
4
$("form#data").submit(function(event){
    event.preventDefault();
    ...
});


这条线

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

应该是

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