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服务器收到作为FormData对象的Ajax提交时，它不能很好地与表单数组一起使用。它将它们视为单独的输入字段，如（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/

只需包含它：
- <script src="http://malsup.github.com/jquery.form.js"></script>
使用以下方法：
- $('#main-form').ajaxForm(function() {

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

使用Ajax的NodeJS + Express

2 个答案: