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

Question

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

    <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 仅包含 $_FILES 数组的 print_r 语句和 $_POST 数组的另一个语句。然而，两个 returned 数组都是空的。

Answer 1

我会使用 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 2

忽略反对票，

将异步设为真！

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

另请参阅 this SO Question，因为如果您遇到更多麻烦，已经有答案了。

来自jQuery Documentation：

Note that synchronous requests may temporarily lock the browser, disabling any actions while the request is active.

Quentin 对序列化的看法是正确的，我在进一步阅读后删除了序列化选项。

Answer 3

你有两个问题。

无法将表单传递给 FormData 对象

document.getElementById('#ambassador');

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

表格中没有成功的数据

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

表单控件只有在具有 name 属性且您的 none 具有

时才能成功。

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

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

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

Sending a FormData object to server with Ajax (contains files)

php

ajax

jquery

multipartform-data

无法将表单传递给 FormData 对象

表格中没有成功的数据