5

我正在尝试使用 jQuery 提交用于服务器端处理的完整表单。该表单包含各种字段，包括文件上传选项。我正在尝试使用 FormData 来执行此操作，因为我不关心目前不支持它的浏览器。

我有以下（简化的）jQuery 代码：

$("#create_event_form").submit(function(event) {
    event.preventDefault();

    var formData = new FormData($(this));

    $.post(
        "create_entity.php",
        { formData: formData },
        function(data) {
            var response = jQuery.parseJSON(data);
            if(response.code == "success") {
                alert("Success!");
            } else if(response.code == "failure") {
                alert(response.err);
            }
        }
    );
});

我的服务器端如下所示：

<?php
require_once('includes/database.php');


$dbh = db_connect();

$response = array();
if($_SERVER['REQUEST_METHOD'] == "POST") {
    // do some other stuff...       

    // upload entity picture and update database
    $url = $_FILES['entity_pic']['name'];
    if($url != "") {
        if($type == "user") {
            $pic_loc = "images/profiles/";
        } else if($type == "chapter") {
            $pic_loc = "images/chapters/";
        } else if($type == "group") {
            $pic_loc = "images/groups/";
        } else if($type == "event") {
            $pic_loc = "images/events/";
        }
        // upload the picture if it's not already uploaded
        if(!file_exists($pic_loc . $_FILES['entity_pic']['name'])) {
            move_uploaded_file($_FILES['entity_pic']['tmp_name'], $pic_loc . $url);
        }
        $image_query = "INSERT INTO image (entity_id, url, type) VALUES (:entity_id, :url, :type);";
        $image_query_stmt = $dbh->prepare($image_query);
        $image_query_stmt->bindParam(":entity_id", $entity_id);
        $image_query_stmt->bindParam(":url", $url);
        $image_query_stmt->bindValue(":type", $type);
        if(!$image_query_stmt->execute()) {
            die(print_r($image_query_stmt->errorInfo()));
        }
    }


    echo json_encode($response);

}

?>

以及一些相关的 HTML：

<form id="create_event_form" action="create_entity.php" method="POST" enctype='multipart/form-data'>
    <input type="file" name="entity_pic" value="Insert Photo" />
    <!-- other inputs -->
</form>

现在我收到一个非法调用错误，大概是在我初始化我的 FormData 对象时。我一直在寻找有关如何使用 jQuery 执行此操作的示例，但结果是空的。另外，我想澄清一下我的服务器端代码可以工作。当我将 formData 作为“formData”传递给我的 PHP 脚本时，如何访问其中的字段？会是 "$_POST['formData']['field_name']" 还是只是 $_POST['field_name'] 或者完全是别的什么？

谢谢你的帮助。

4

2 回答 2

15

FormData在其构造函数中采用表单元素而不是 jQuery 对象 -var formData = new FormData(this);

您已经为 jQuery ajax 设置了一些选项来处理 formdata 对象，因此您应该使用 $.ajax 而不是 $.post，并将 formdata 本身作为数据传递。

$.ajax({
  url: "create_entity.php",
  data: formData,
  processData: false,
  contentType: false,
  type: 'POST',
  success: function(data) {
        var response = jQuery.parseJSON(data);
        if(response.code == "success") {
            alert("Success!");
        } else if(response.code == "failure") {
            alert(response.err);
        }
    }
});
于 2012-12-06T18:47:33.200 回答
1

要回答你的最后一个问题，我相信它会是 $_POST['field_name']。查看这篇文章以获取有关您正在寻找的实现的一些信息： Sending multipart/formdata with jQuery.ajax

希望这可以帮助 ：）

于 2012-12-06T18:51:20.213 回答