javascript - 如何在表单 POST 请求中上传单独选定的文件？

Question

这个问题已经有答案了:

Uploading multiple files using formData() (19 个回答)

已关闭 5 年前。

我想要什么

人们点击添加图像按钮，他们选择一个图像，图像被添加到图库中。

他们可以通过单击十字符号来删除图像，然后重新单击“添加图像”按钮来添加更多图像。

这一切都有效，我引用了所有 File元素。

但是，我不知道如何在表单的 post 请求中发送文件。

问题问题是您无法在文件数组中创建 FileList，或将文件数组设置为 input.files = arrOfFiles 。

输入元素本身不允许您添加更多文件或删除文件...它只是用新文件替换旧文件。

这不是我想要的，因此我在 js 中保留对文件对象的引用，并让用户删除图像或添加更多图像。

我知道我可以将单个文件作为 XHR 发送，但我想通过已存在的表单发送它们。

我想知道一种通过表单而不是js发送文件的方法，但显然这是不可能的

Answer 1

这正是 FormData API 的意思用于:从头开始创建表单数据，您将能够将其上传到服务器，就像从<form>创建它一样。对象，只不过您可以控制哪些内容会出现或不出现。

因此，要在 FormData 中附加文件或 Blob，代码是

var fd = new FormData();
fd.append(field_name, blob, file_name);

要追加多个文件，可以再次调用fd.append ，但请注意，后端通常需要有 field_name以这样的方式格式化，他们可以知道这里需要多个值。通常这是通过添加 [] 来完成的。在您的字段名称之后。

var fd = new FormData();
fd.append('files[]', blob_1, file_name_1);
fd.append('files[]', blob_2, file_name_2);

然后您可以通过 AJAX 请求将其发送到您的服务器，这不会使该请求与由单个 <input multiple name="files[]"> 发出的真实请求之间产生差异。 .

请注意，如果是文件，file_name 是可选的，如果未设置，则默认为文件名。但是，如果您不想设置随机名称，则 Blob 需要它。

var file_1 = new File(['foo'], 'file1.txt',{type:'text/plain'});
var file_2 = new File(['bar'], 'file2.txt', {type:'text/plain'});

var fd = new FormData();
fd.append('files[]', file_1);
fd.append('files[]', file_2);

console.log(...fd.entries());

// and to send it to your server
var xhr = new XMLHttpRequest();
xhr.open('POST', 'your_server_url');
xhr.send(fd);