使用 Ajax 将 FormData 对象发送到服务器（包含文件）

Question

我有一个包含文本和文件字段的表单。我正在尝试将整个内容提交到服务器上托管的 php 脚本，并返回一条验证消息。我的表单如下所示：

    <form id="ambassador" method="post" enctype="multipart/form-data">
        <label for="name">Name: </label>
        <input type="text" id="name"> <br />
        <label for="age">Age: </label>
        <input type="number" id="age"> <br />
        <label for="igram">Instagram Account: </label>
        <input type="text" id="igram"> <br />
        <label for="photo">Photograph Upload: </label>
        <input type="file" id="photo"><br />
        <label for="why">Why should you represent Drip Cold Pressed Juice?</label>
        <textarea id="why" width="300px"></textarea>
        <button type="submit" class="btn">Apply!</button>
    </form>

我的 jQuery 看起来像：

jQuery("#ambassador").submit(function(event) {
    event.preventDefault
    var server = "http://getdripped.com/dev/ambassador.php";

    var form = document.getElementById('#ambassador');
    var formData = new FormData(form);

    alert(formData);


    jQuery.ajax({
        url: server,
        type: 'POST',
        data: formData,
        async: false,
        success: function (data) {
            alert(data)
        },
        cache: false,
        contentType: false,
        processData: false
    });

    return false;  
});

php 只包含一个print_r 语句用于$_FILES 数组和另一个$_POST 数组。但是，两个返回的数组都是空的。

Answer 1

你有两个问题。

未能将表单传递给 FormData 对象

document.getElementById('#ambassador');

getElementById 方法需要一个 id，但您传递给它的是一个 selector。您需要删除#。目前您正在将null 传递给new FormData（因为没有匹配的元素，所以gEBId 返回null）。

表格中没有成功的数据

<input type="number" id="age">

只有当表单控件具有name 属性而您的没有属性时，它们才能成功。

更正 ID 后，您将使用表单中的所有成功控件填充表单数据对象：但没有。

您需要为每个输入添加名称属性。

Answer 2

我会使用 iframe 作为表单的目标。

   <form id="ambassador" method="post" enctype="multipart/form-data" target="form_iframe" >

    <iframe name="form_iframe" id="form_iframe" ></iframe>

另见How to make Asynchronous(AJAX) File Upload using iframe?

Answer 3

忽略反对票，并且

将异步设置为 true！

您将异步设置为 false。这意味着您的成功回调不会等待回复并在 PHP 回复之前完成。

---

如果遇到更多麻烦，请查看this SO Question，因为已经有答案了。

来自jQuery Documentation：

请注意，同步请求可能会暂时锁定浏览器，从而在请求处于活动状态时禁用任何操作。

Quentin 关于序列化的说法是对的，我在进一步阅读后删除了序列化选项。