HTML5 FormData 通过 JQuery 发送空对象

Question

我有一个基本脚本如下：

$(".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' 方法。

我正在使用 jQuery v 2.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 错误？某些东西可能无法正常访问？日志中没有打印错误，我的发布请求中只有一个空白对象。

感谢您的帮助！

Answer 1

如果您使用 Express 作为后端，body-parser 不会处理 multipart/form-data，而是使用 multiparty 来引用您。您可以像这样将 Express 与 multiparty 集成：

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

    ...
});

Answer 2

如果用户点击enter，您不会阻止默认表单提交事件，也不会通过键盘捕获提交。

试试：

$("#msform").submit(function(e){
    e.preventDefault();
    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);
     }
  });
});

如果您不发送文件，我建议您使用更简单的方法，即删除 processData 和 contentType 选项并使用 $(this).serialize() 作为 data 值