使用Ajax的NodeJS + Express

Question

我正在编写一个Web实用程序，该实用程序通过Ajax提交文件和某些表单字段。 我的表单中有一部分是动态的，因为其中可以有多行具有相同的值。 用户可以添加任意多的行。 该表格还包含一个文件。

HTML最终具有以下效果：

<form id="main-form">
    <input  name="inputField[0]" type="text"></input>
    <input  name="inputField[1]" type="text"></input>
    <input  name="inputField[2]" type="text"></input>
    <input  name="inputField[3]" type="text"></input>
    ....
    <input  name="inputField[i]" type="text"></input>
    <input type = "file" name="file></input>
</form>

单击提交按钮后，将调用以下Ajax：

var mainForm = $("#main-form");
$.ajax({
        url: '/',
        type: 'POST',
        success: successHandler,
        data: mainForm.serialize(),
        complete: checkError,
        cache: false,
        processData: false
    });

这是问题。 我现在陷入了困境22。 通过Ajax传递文件的推荐方法是使用FormData对象。 问题是我无法让FormData与我的数组合作。 当NodeJS服务器将Ajax提交作为FormData对象接收时，它不能很好地与表单数组配合使用。 它将它们视为单独的输入字段，例如（console.log（request.body））：

{ normalField: 'normalResult',
  'inputField[0]': 'test0',
  'inputField[1]': 'test1',
  'inputField[2]': 'test2',
  'inputField[3]': 'test3',
}

.serialize（）方法为我提供了一个不错的数组，例如：

{ normalField: 'normalResult',
  inputField: 
   [ 'test1',
     'test2',
     'test3',
     'test4' ]
}

但是.serialize（）不适用于文件提交。

所以，我想知道什么是最好的方式来支持这一点。 我的要求是表单提交后不能离开页面，因此我认为Ajax是正确的选择。

FormData是否可以与输入数组和NodeJS Express完美配合使用？ 或为此进行任何形式的变通？ 当.serialize（）表现得如此出色时，我真的不想做某种类型的字符串查找。

Answer 1

也许不是您要找的答案，但我认为它可能会解决您的问题：

只需更改您在服务器上收到的对象：

{ 
  'inputField[0]': 'test0',
  'inputField[1]': 'test1',
  'inputField[2]': 'test2',
  'inputField[3]': 'test3',
 }

所需的内容（mainForm是从客户端发送的对象的名称）：

var inputField = [];

for (var val in mainForm) {
  inputField.push(mainForm[val]);
}

数组inputField现在包含正确格式的值（console.log（inputField））：

['test0', 'test1', 'test2', 'test3'];

小提琴： https : //jsfiddle.net/00ocdujy/3/

Answer 2

看来您使用的是jQuery ，因此建议您使用以下插件：

http://jquery.malsup.com/form/

1. 只需包括它：

   • <script src="http://malsup.github.com/jquery.form.js"></script>

2. 使用以下方法：

   • $('#main-form').ajaxForm(function() {

检查链接以获取更多详细信息