jQuery FormData POST - 用于文件上传

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

}

？>

还有一些相关的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);
        }
    }
});