php 使用ajax将表单数据和文件传递给php
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19736272/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Passing form data and file to php using ajax
提问by Alex Clark
This might have been asked before, but i have search on here and on google and every answer I have read doesnt work.
之前可能有人问过这个问题，但我在这里和谷歌上搜索过，我读过的每个答案都不起作用。
The question I have to solve is make a form with first name, last name, email and a image. Then pass the data into a database and upload the file also to a database. Currently my code doesnt do anything after I press submit. Before I added the file box it would insert the data into my database.
我必须解决的问题是制作一个包含名字、姓氏、电子邮件和图像的表格。然后将数据传递到数据库并将文件也上传到数据库。目前我的代码在我按下提交后没有做任何事情。在我添加文件框之前，它会将数据插入到我的数据库中。
HTML
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
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
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 />";
回答by Rich Hatch
Forms by default submit to wherever they're told. In order to stop this, you need to prevent it. Your js should look something like this:
表单默认提交到他们被告知的任何地方。为了阻止这种情况，您需要防止它。你的 js 应该是这样的：
$("form#data").submit(function(event){
event.preventDefault();
...
});
回答by Aditya Vikas Devarapalli
change the submittype button to buttontype and then use AJAX like this:
将submit类型按钮更改为button类型，然后像这样使用 AJAX：
<button type="button" name="btnSubmit" id="btnSubmit"> Submit </button>
you need to change the jQuery Code to :
您需要将 jQuery 代码更改为：
$("#btnSubmit").click(function(){
var formData = new FormData($("#myForm"));
$.ajax({
type: 'POST',
url: 'form2.php',
data: formData,
success: function (data) {
alert(data)
},
});
});
and also change the code here if ($_FILES["file"]["error"] > 0)to if ($_FILES["image"]["error"] > 0)
并将此处的代码更改if ($_FILES["file"]["error"] > 0)为if ($_FILES["image"]["error"] > 0)
回答by Gavin
This line
这条线
if ($_FILES["file"]["error"] > 0)
Should be
应该
if ($_FILES["image"]["error"] > 0)
