Question

我正在尝试使用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);

}

＆GT;

以及一些相关的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']或其他完全不同的东西？

感谢您的帮助。

Answer 1

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);
        }
    }
});

Answer 2

要回答你的上一个问题，我相信它会是$ _POST ['field_name']。查看此帖子，了解有关您正在寻找的实施的一些信息： Sending multipart/formdata with jQuery.ajax

希望这会有所帮助：）

jQuery FormData POST - 用于文件上传

2 个答案: