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 。

我希望這會有所幫助。