Javascript 文件上传分两步

Question

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

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

长话短说：我的表单中有 3 个输入（文本）字段、一个输入（文件）字段和一个保存按钮。 点击保存按钮后，表单调用 JS function，它必须处理数据（文本和文件）并通过 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变量的声明移动到外部 scope 中，仅在uploadPicture中添加文件，然后在保存按钮的单击处理程序中使用formData 。

我希望这会有所帮助。