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 />"; |
将
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) }, }); }); |
同时将这里的代码
默认情况下,表单将提交到他们被告知的任何位置。为了阻止这种情况,你需要阻止它。您的JS应该如下所示:
1 2 3 4 | $("form#data").submit(function(event){ event.preventDefault(); ... }); |
这条线
1 | if ($_FILES["file"]["error"] > 0) |
应该是
1 | if ($_FILES["image"]["error"] > 0) |