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

我有一个既有文本字段又有文件字段的表单。我试图将整个过程提交到服务器上托管的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>

---

php只包含一个用于

$\u文件

数组的

print\u r

语句，另一个用于

$\u POST

数组。但是，两个返回的数组都是空的

我将使用iframe作为表单的目标

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

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

---

另请参见忽略否决票，以及

将async设置为true

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

---

另外，如果你遇到更多的麻烦，也要看看已经有了答案

从：

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

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

您有两个问题

未能将表单传递给FormData对象

getElementById

方法接受一个id，但您要给它传递一个选择器。您需要删除

#

。当前您正在将

null

传递给

newformdata

（因为没有匹配的元素，所以gEBId返回

null

）

表单中没有成功的数据

只有当表单控件具有

名称

属性而您的控件没有属性时，表单控件才能成功

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

---

您需要为每个输入添加一个name属性。

Hi，为此，最好使用iframe@ArtisiticPhoenix-为什么？嗨，尼克，把async设置为true。否则，您的浏览器可能会被阻止，直到上传完成为止。@Quentin-因为这是一种老式的方式，即使禁用了javascript，它也可以在每个浏览器中工作。谢谢您的快速响应！你能详细说明一下吗？我不太熟悉在这种方法中使用iFrame。您只需将is设置为表单的目标，您可以隐藏或显示iFrame，因为处理表单的脚本的任何输出都将显示在iFrame中，可以想象iFrame类似于另一个页面或类似于我做的虫洞，正如在sci Fit中一样，使用回调的全部意义在于，在响应到达之前不会调用回调，更重要的是，将async设置为false将导致脚本在收到响应之前阻塞所有内容。使用

serialize

不会包含文件，这使得它变得毫无意义。@Quentin如果你做了否决投票，请先阅读我写的“将其设置为true”。即使是用大写字母。我希望您能先给我一点意见。将其设置为true虽然是最佳做法，但对解决问题毫无帮助。你对为什么应该设置为true的解释仍然完全是错误的。@Quentin:取决于他如何检查回答。如果他等待响应，可能不会显示警报，因为整个函数已经完成，回调将不再触发。让我们一点一点地到达那里。代码是有问题的！我们可以看到他是如何检查反应的。他在

success

上使用了一个回调，当回复回来时就会触发。你是一个美丽的人！我应该抓住那些错误的，我猜盯着同一个代码真的让你头疼！非常感谢。

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

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

document.getElementById('#ambassador');

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