Javascript HTML5 FormData通过JQuery发送空对象

我有一个基本脚本，如下所示：

$(".submit").click(function(){
    var fd = new FormData();
    fd.append('username', 'Bob');

    $.ajax({
     url: '/signup',
     type: 'post',
     data: fd,
     processData: false,
     contentType: false,
     success: function (data) {
         console.log("Success: ", data);
     }
  });
});

当请求到达我的服务器时，我会收到一个req.body的

{}

（空），并且req中没有任何内容指向正在发送的数据。这是怎么回事？如何使用FormData发送数据

我想测试从FormData获取基本预设数据，但未成功。Chrome中登录的值控制台显示一个空的formData对象，只有其构造函数和可用的“append”方法

我正在使用jqueryv2.1.4和HTML5，并且已经确认window.FormData是Google Chrome中的有效对象

我的目标是创建一个表单，用户可以使用以下表单输入电子邮件、密码、化身和个人资料背景图像：

<form id="msform" enctype="multipart/form-data" name="msform">
  <!-- Progress Bar -->
  <ul id="progressbar">
    <li class="active">Basic Information</li>
    <li>Profile Customization</li>
  </ul>

  <!-- Step One -->
  <fieldset>
    <h2 class="title">Basic Information</h2>

    <input type="text" name="username" placeholder="Username" />
    <input type="text" name="password" placeholder="Password" />
    Avatar Image <input type='file' id='avatarImage' accept="image/*" name='avatarImage'>
    <input type="button" name="next" class="next action-button" value="Next" />
  </fieldset>

  <!-- Step Two -->
  <fieldset>
    <h2 class="title">Profile Customization</h2>

    <select id="dropdown" name="profileColor">
      <option value="red">Red</option>
      <option value="blue">Blue</option>
      <option value="yellow">Yellow</option>
    </select>

    Background Photo <input type='file' id='bgPhoto' accept="image/*" name='bgPhoto'> </div>
    <input type="button" name="previous" class="previous action-button" value="Previous" />
    <input type="submit" name="submit" class="submit action-button" value="Submit" />
  </fieldset>
</form>

基本信息
配置文件自定义

基本信息
化身图像
配置文件自定义
红色
蓝色
黄色的
背景照片

FormData看起来是一个有效的对象，但我无法向它添加任何内容。我已经看过了，似乎其他人在他们的控制台中看到了一个空对象，但是数据“自动（？）”出现在他们的服务器上？我的第一个代码块基本上是文档的副本，我遇到了麻烦。是否会出现和CORS问题或CDN错误？某些东西可能无法访问它应该访问的内容？日志中没有打印错误，我的post请求中只有一个空白对象

---

谢谢你的帮助

如果用户点击

enter

，则不会阻止默认表单提交事件，也不会通过键盘捕获提交

尝试：

---

如果您不发送文件，我建议使用更简单的方法删除

processData

和

contentType

选项，并使用

$（this）.serialize（）

对于

数据

值

如果您使用Express作为后端，则不处理多部分/表单数据，你被指代为使用。您可以将Express与多方集成，如下所示：

var express = require('express');
var multiparty = require('multiparty');

var app = express();
var data = new multiparty.Form();

app.post('/signup', function(req, res) {
    data.parse(req, function(err, fields, files) {
        if(err) throw err;

        Object.keys(fields).forEach(function(name) {
            console.log('got field named : ' + name + ', value : ' + fields[name]);
        });

        Object.keys(files).forEach(function(name) {
            console.log('got file named : ' + name);
        });
    });
});

在单击事件处理程序中包含

event.preventDefault（）

$(".submit").click(function(e){
    e.preventDefault();

    var fd = new FormData();
    fd.append('username', 'Bob');

    ...
});

---

嘿，谢谢@charlietfl，我尝试了上面的代码，包括e.preventDefault（）；陈述我以前的代码中有一个“return400；”但是为了这个问题忘了它。有什么区别吗？不幸的是，我没有看到任何行为变化——req.body在我的服务器日志中仍然没有定义，而在浏览器控制台中FormData仍然是一个空对象。我猜您在服务器中缺少了一些内容。它是节点吗？您是否需要适当的模块？我在服务器中丢失了一个模块“multiparty”。正如我刚刚了解到的，主体解析器不处理多部分/表单数据。谢谢你的帮助！就是这样！添加multiparty后，我可以通过代码查看字段和值。另请注意，对于其他人，我确实必须通过回调进行解析，才能看到req.body仍然为空的值。如果需要，Anugerah编写的上述代码可以轻松地填充req.body对象。真的很感谢你的建议！非常感谢。这也是我第一次遇到多方，所以很抱歉，我不能给你更多的代码，但我想在不久的将来我也会在AJAX表单中使用它。顺便说一句，一定要像@charlietfl提到的那样包括e.preventDefault（）。我也更新了答案。如果您能通过单击答案左侧的绿色复选标记接受我的答案，我将不胜感激：）

$(".submit").click(function(e){
    e.preventDefault();

    var fd = new FormData();
    fd.append('username', 'Bob');

    ...
});