表单提交后window.history.replaceState()无法正常生效的问题

你的代码问题很明确：e.target.submit()执行后页面会立即跳转/刷新，后续的window.history.replaceState()代码还没来得及运行，原页面就已经被卸载了，所以修改URL的操作完全没生效。

下面给你两种可行的解决方案：

方案1：AJAX异步提交文件（推荐，无页面刷新） #

用FormData异步提交文件，页面不会刷新，提交完成后可以顺利修改URL。修改你的JS代码如下：

async function finalSubmission(e) {
    e.preventDefault(); // 阻止默认表单提交行为
    const form = e.target;
    const urlFinal = "https://<website to upload to>?<query parameters>";
    
    // 构建包含文件的FormData
    const formData = new FormData(form);
    
    try {
        // 异步提交表单
        const response = await fetch(urlFinal, {
            method: 'POST',
            body: formData
        });
        
        if (response.ok) {
            // 提交成功后修改URL
            const baseUrl = window.location.href.split('?')[0];
            const newUrl = baseUrl + "?submit=done";
            window.history.replaceState({}, document.title, newUrl);
            // 可在此添加提交成功的提示逻辑
        } else {
            console.error('文件提交失败');
        }
    } catch (error) {
        console.error('提交过程出错:', error);
    }
}

HTML部分无需改动，保持原表单结构即可。

方案2：传统表单提交（页面刷新场景） #

如果必须使用传统表单提交（页面会跳转），原页面无法修改跳转后的URL，你需要在表单提交的目标页面（即https://<website to upload to>对应的页面）中添加修改URL的代码：

// 目标页面加载完成后执行URL修改
window.addEventListener('load', function() {
    const baseUrl = window.location.href.split('?')[0];
    const newUrl = baseUrl + "?submit=done";
    window.history.replaceState({}, document.title, newUrl);
});

这样页面跳转完成后，会自动替换URL，隐藏原有的查询参数。

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