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中没有任何内容指向要发送的数据。这里发生了什么？如何使用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

You aren't preventing the default form submit event and neither are you catching a submit by keyboard if user hits enter.

Try:

$("#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);
     }
  });
});

If you aren't sending files I would suggest using the simpler approach of removing the processData and contentType options and using $(this).serialize() for the data value

HTML5 FormData通过JQuery发送空对象

2 个答案: