使用ajax将表单数据和文件传递给php [重复]答案

【问题标题】：Passing form data and file to php using ajax [duplicate]使用ajax将表单数据和文件传递给php [重复]
【发布时间】：2013-11-13 05:09:55
【问题描述】：

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

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

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 />";

【问题讨论】：

stackoverflow.com/questions/9622901/…
欢迎来到Stack Overflow。提问时，有助于解释您的具体意思。例如，不要只说“不起作用”。这说明了什么？它如何帮助解决问题？另外，最好解释一下您为什么要做某事，因为有人可能会告诉您您是否以错误的方式做某事，但如果是为了其他事情，则可能是可以接受的。有关详细信息，请参阅How to Ask。谢谢！
Qantas 94 Heavy，是不是更好的解释？
Alex ，我刚刚改进了你的代码并修复了 js 问题，你可以从这个链接中提取代码github.com/AstmDesign/phpAjaxUploader
为什么你们总是标记为重复的问题。这不是重复的问题。投票

标签： javascript php jquery html ajax

【解决方案1】：

表单默认提交到他们被告知的任何地方。为了阻止这种情况，您需要阻止它。你的 js 应该是这样的：

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

【讨论】：

【解决方案2】：

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

【讨论】：

我添加了它并更改了我的 jquery，但在存储到我的数据库时仍然没有骰子，也不应该弹出警报吗？
您是否正确连接到您的数据库？您使用什么代码将数据存储到 db 中？
我连接正常，自从我添加了文件框后，我没有更改连接代码。在我将表单数据添加到我的数据库或只是文件但无法同时获得之前。我感觉我的 ajax 没有进入我的 php 文件。
再次签出。我改变了ajax代码
我试过了，还是不行。网络选项卡仅使用 GET 方法显示我的表单，当我按下提交时没有任何操作>？

【解决方案3】：

这一行

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

应该是

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

【讨论】：

您的浏览器控制台显示什么作为响应？
什么都没有在控制台上显示任何响应