设置form action后表单无法跳转上传链接，提交失效的技术求助

问题描述 #

HTML页面中，用户选择文件后点击提交按钮，本应将文件上传至指定URL并跳转至该页面，但目前页面停留在原页面，文件也未提交。submitForm函数中的e.preventDefault()和return false不能移除，需要解决这个问题。

原代码片段 #

HTML代码 #

<form method = "post" enctype="multipart/form-data" id = finalsubmit onsubmit = "submitForm(event)">
    <label for = "myfile"><strong>Select a file to be uploaded:</strong></label>
    <input class = choosebutton type = "file" id = "myfile" name = "filename"><br>
    <input class = uploadbutton type = "submit" onclick="finalSubmission()" value = "Upload File">
</form>

JavaScript代码 #

async function finalSubmission () {
    const accessKey = await assignSas(); // 生成访问密钥的函数
    let urlFinal = "https://<upload-link>" + "?accesskey=" + accessKey;
    document.getElementById("finalsubmit").action = urlFinal;
}

async function submitForm(e) {
    e.preventDefault();
    await Promise.resolve();
    return false
}

问题根源 #

1. 点击提交按钮时，onclick绑定的finalSubmission（异步函数）和onsubmit绑定的submitForm几乎同时触发，但finalSubmission需要等待assignSas返回密钥，此时submitForm已经执行了e.preventDefault()和return false，直接阻止了表单的默认提交行为。
2. 即使后续finalSubmission完成并设置了表单action，也没有触发新的提交动作，导致文件无法上传、页面也不跳转。

解决方案 #

方案一：将提交按钮改为普通按钮，手动触发表单提交 #

修改HTML，把type="submit"改为type="button"，避免自动触发表单默认提交；在finalSubmission中完成密钥获取和action设置后，手动调用表单的submit()方法。

修改后的HTML

<form method="post" enctype="multipart/form-data" id="finalsubmit">
    <label for="myfile"><strong>Select a file to be uploaded:</strong></label>
    <input class="choosebutton" type="file" id="myfile" name="filename"><br>
    <input class="uploadbutton" type="button" onclick="finalSubmission()" value="Upload File">
</form>

修改后的JavaScript

async function finalSubmission () {
    const accessKey = await assignSas();
    let urlFinal = "https://<upload-link>" + "?accesskey=" + accessKey;
    const form = document.getElementById("finalsubmit");
    form.action = urlFinal;
    // 手动提交表单，触发默认跳转
    form.submit();
}

// 移除原submitForm函数，不再需要阻止默认行为

方案二：保留submit按钮，通过标志位控制提交时机 #

设置一个标志位，在submitForm中判断是否已完成密钥获取和action设置，未完成则阻止默认提交，等待异步操作完成后再手动提交；完成后则允许默认提交。

修改后的HTML

<form method="post" enctype="multipart/form-data" id="finalsubmit" onsubmit="submitForm(event)">
    <label for="myfile"><strong>Select a file to be uploaded:</strong></label>
    <input class="choosebutton" type="file" id="myfile" name="filename"><br>
    <input class="uploadbutton" type="submit" value="Upload File">
</form>

修改后的JavaScript

// 标志位：标记是否已准备好提交表单
let isSubmitReady = false;

async function finalSubmission () {
    const accessKey = await assignSas();
    let urlFinal = "https://<upload-link>" + "?accesskey=" + accessKey;
    document.getElementById("finalsubmit").action = urlFinal;
    isSubmitReady = true;
}

async function submitForm(e) {
    if (!isSubmitReady) {
        // 未准备好，阻止默认提交
        e.preventDefault();
        // 等待密钥获取和action设置完成
        await finalSubmission();
        // 手动提交表单
        document.getElementById("finalsubmit").submit();
        return false;
    }
    // 已准备好，允许默认提交（自动跳转）
}

核心逻辑说明 #

两种方案的核心都是确保表单的提交动作在action设置完成后再触发：

• 方案一通过将按钮改为普通按钮，完全由代码控制提交时机；
• 方案二通过标志位判断状态，避免重复阻止提交，保证异步操作完成后再执行提交。

内容的提问来源于stack exchange，提问作者bowlingh23