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 中的文件，然后在保存按钮的点击处理程序中使用 formData。

希望对您有所帮助。

Javascript 分两步上传文件

Javascript file upload in 2 steps

javascript

upload