如何使用 Ajax、PHP 和 jQuery 将 multipart/form-data 发送到服务器？

Question

我有一个表单，我需要在其中发送用户的姓名以及他的个人资料图片。所以我使用 HTML & Bootstrap 创建了下面的表单 -

 <form action="" method="post" id="demoForm" enctype="multipart/form-data">
    <div class="form-group">
        <label for="">Upload file</label>
        <input type="file" name="file" id="file" class="form-control">
    </div>
    <div class="form-group">
        <label for="">Your Name</label>
        <input type="text" name="name" id="name" class="form-control">
    </div>
    <div class="form-group">
        <input type="submit" name="save" id="save" value="Save" class="form-control btn btn-success">
    </div>
 </form>
<div id="result"></div>

现在我需要使用 PHP 将此数据发送到我的服务器。所以我使用 jQuery 编写了以下 Ajax 代码 -

$(document).ready(function(){
    $('#demoForm').submit(function(e){
        e.preventDefault();
        var formData = new FormData(this);
        $.ajax({
            url: "ajax.php",
            type: "POST",
            data: formData,
            contentType : false,
            processData: false,
            success: function(data){
                $('#result').html(data);
            }
        });
    });
});

现在我在 ajax.php 文件中编写了以下 PHP 代码 -

if(isset($_POST['save'])){

    $name = $_POST['name'];
    $file = $_FILES['file']['name'];

    if(!empty($file) && !empty($name)){
        $fileName = $_FILES['file']['name'];
        $tmp = $_FILES['file']['tmp_name'];
        $upload = move_uploaded_file($tmp,'uploads/'.$fileName);
       if($upload){
            echo "<h2>".$name.", your file has been uploaded successfully!</h2>";
       }else{
           echo "<h2>Something went wrong!</h2>";
       }
    }else{echo "File cannot be empty.";}
}else{echo "There is a problem";}

现在，问题是我没有从 php 文件中得到任何响应。换句话说，ajax.php 文件没有从 index.php 文件中接收通过 Ajax 发送的数据。任何人都可以通过指出我犯了什么错误来帮助我吗？如果有任何解决方案，请与您分享。谢谢。

Answer 1

if(isset($_POST['save'])){ 是问题所在。

提交按钮只有用于提交表单才会是一个成功的控件。

您的 JavaScript 正在取消提交表单并改为使用 FormData 对象发出请求。

测试是否存在其他一些数据，将save 设为隐藏输入，或完全删除检查。

---

您的 PHP 中有三个 if 语句。其中只有一个有else 来输出错误。将带有消息的else 添加到其他两个将使您更容易调试代码。

Answer 2

您正在从 Ajax 提交表单，因此不会设置 $_POST['save'] 变量。因此 if 块内的代码不会运行。从您的 PHP 代码中删除这一行 if(isset($_POST['save'])){ 并像这样重写它

$name = $_POST['name'];
$file = $_FILES['file']['name'];

if(!empty($file) && !empty($name)){
    $fileName = $_FILES['file']['name'];
    $tmp = $_FILES['file']['tmp_name'];
    $upload = move_uploaded_file($tmp,'uploads/'.$fileName);
   if($upload){
        echo "<h2>".$name.", your file has been uploaded successfully!</h2>";
   }else{
       echo "<h2>Something went wrong!</h2>";
   }
}