Question

我的网站上有一个表格，人们可以在其中附加文件。当按下按钮时，它会将用户保持在同一页面上（但会更新他们的屏幕），并且表单内容将使用 xmlhttprequest 中的 formdata 发送。

当它用于一个文件时效果很好：<input type="file" id="files" />

var xml = new XMLHttpRequest(), form = new FormData();
form.append("files", document.getElementById("files").files[0]);

但是，我更改了输入以允许多个文件：<input type="file" id="files" multiple="multiple" />

但现在我不确定应该如何调整代码的 form.append 部分。

我是否应该为文件创建某种循环以单独附加每个文件，并在附加名称的末尾添加一个计数器？像第一个图像的“files1”和第二个图像的“files2”？有没有更直接的方法？

值得注意的是，我在代码的第一部分使用 files[0] 的原因是因为它实际上会发送图像，而不仅仅是一些说明它是对象的文本。也许有一种方法可以发送一个对象并使所有图像都成为该对象的一部分？

Answer 1

这样的事情应该适用于您的案例场景：

var n_files = document.getElementById('files').files.length;
for (var x = 0; x < n_files; x++) {
    form.append("files[]", document.getElementById("files").files[x]);
}

忘记将 files 更改为 files[] 是很常见的。
同样重要的是，这取决于您的多部分表单将如何在服务器端处理。

将多个文件作为 XMLHttpRequest 和 FormData 的一部分发送

1 个答案: