jQuery上传文件后表单仍无法提交且提示需上传文件问题求助

问题根源分析 #

你的代码逻辑有个小坑：当你点击#btnSave按钮时，才会给表单绑定submit事件。如果第一次点击按钮时没有上传文件，就会给表单绑定一个「阻止提交+弹出提示」的submit事件；之后哪怕你上传了文件，再次点击按钮时，虽然此时vidFileLength不为0，不会重新绑定submit事件，但之前绑定的那个阻止提交的事件依然存在——所以提交表单时还是会触发旧的逻辑，弹出错误提示。

修复方案 #

给你两种更可靠的实现方式，选哪种都可以：

方案一：直接在按钮点击时完成验证 #

这种方式逻辑更直接，不需要动态绑定submit事件，避免残留事件的问题：

$("#btnSave").click(function (e) {
    // 阻止按钮默认的提交行为（如果按钮是submit类型的话）
    e.preventDefault();
    
    var vidFileLength = $("#videoUploadFile")[0].files.length;
    if(vidFileLength === 0){
        alert('Selecteer een afbeelding!');
        return;
    }
    
    // 验证通过，主动提交表单
    $("#formType").submit();
});

注意：如果你的按钮是<button type="button">，可以去掉开头的e.preventDefault()，因为它本身不会触发表单提交。

方案二：监听表单的submit事件（更规范） #

直接监听表单的提交事件，不管用户是点击按钮还是按回车提交，都会触发验证，逻辑更严谨：

$("#formType").submit(function(e){
    var vidFileLength = $("#videoUploadFile")[0].files.length;
    if(vidFileLength === 0){
        alert('Selecteer een afbeelding!');
        // 阻止表单提交
        e.preventDefault();
    }
    // 验证通过的话，表单会自动提交，不需要额外操作
});

这种方式下，#btnSave只需要是普通的submit按钮就行，不用再给它绑定点击事件啦～

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