如何实现文件选择阻塞，待选完文件后再提交表单？

文件选择框的交互是异步的，浏览器不允许阻塞主线程等待用户完成文件选择操作，所以没法用“阻塞”的方式实现你的需求。正确的思路是先阻止表单的默认提交行为，等用户选完文件后再手动触发提交。

修改步骤及代码实现 #

1. 阻止表单默认提交
   点击上传按钮时，先不让表单直接提交，只唤起文件选择框。

2. 文件选择完成后手动提交
   在文件选择的change事件里，确认用户选中文件后，再显示加载效果并提交表单。

修改后的完整代码：

表单代码

<form action="{{ url_for('test') }}" method="post" onSubmit="return submitDocument()">
    <button class="ui left floated positive submit button" id="upload-button" type="submit">Upload Document</button>
</form>

文件输入框代码

<input type="file" onchange="fileEvent(event)" class="inputfile" id="embedfileinput" accept="image/*, application/pdf, application/msword" style="display:none"/>

JavaScript代码

function showProcessing() {
     $('#processing').dimmer('show');
}

function submitDocument() {
    // 阻止表单默认提交，只唤起文件选择框
    document.getElementById('embedfileinput').click();
    return false;
}

function fileEvent(event) {
    const fileInput = event.target;
    // 检查是否有文件被选中
    if (fileInput.files.length > 0) {
        showProcessing();
        // 手动提交表单
        fileInput.form.submit();
    } else {
        // 用户取消选择时，隐藏加载效果（可选）
        $('#processing').dimmer('hide');
    }
}

逻辑说明 #

• 点击上传按钮时，submitDocument返回false，拦截表单的默认提交流程，仅弹出隐藏的文件选择框。
• 用户选中文件后，fileEvent触发：先检查文件是否存在，再显示加载动画，最后调用form.submit()手动提交表单。
• 如果用户取消文件选择，可以按需隐藏加载效果，避免界面一直处于加载状态。

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