Javascript 文件上传只需两步

Question

我知道有很多主题解释通过 javascript 上传文件。但我的问题是其他的。

我使用纯 JS 上传文件，效果很好，但我的问题是，我不希望从表单中选择文件后直接上传文件。因为表单有其他输入字段，我想在通过ajax点击保存按钮后将所有内容上传到服务器。我也不想刷新页面，因此一切都应该通过 ajax。

长话短说:我的表单中有 3 个输入(文本)字段、一个输入(文件)字段和一个保存按钮。点击保存按钮后，表单调用 JS 函数，该函数必须处理数据(文本和文件)并通过 ajax 将其发送到服务器。

希望我能解释一下这个问题。

<form>
<input type="text" name="field1">
<input type="text" name="field2">
<input type="text" name="field3">
<input type="file" name="file" multiple id="myFile" onchange="uploadPicture()">
</form>

还有 JS

function uploadPicture() {
var formData = new FormData();
for (var i = 0; i < document.getElementById('myFile').files.length[i]) {
formData.append('files[]', file);
....
and in here I send the formData via ajax to my server, which works fine.

现在我的问题不是直接将数据发送到服务器，而是临时保存它们，然后在点击保存按钮后将所有内容发送到服务器...

我想知道是否有一种方法(技巧)可以在上传和发送之间保存文件。

希望现在更清楚了。

谢谢

Answer 1

将 formData 变量的声明移至外部作用域，仅添加 uploadPicture 中的文件，然后在 click- 中使用 formData保存按钮上的处理程序。

希望对您有所帮助。