Javascript 仅在验证文件大小和文件扩展名后提交表单

我使用下面的代码提交一个表单来上传简历。我想检查所选文件的扩展名和大小。只有在满足某些条件的情况下才提交表格。目前，表单显示警报消息。但用户仍然可以提交表单。下面是代码

<form enctype="multipart/form-data" id="qual" class="form-horizontal" action="updater.php"  method="post">
<div class="form-group">
       <label class="col-md-4 control-label" for="act">Upload CV</label>
        <div class="col-md-5">
            <input required type="file" name="cv" id="cv" class="btn btn-default">
            <span class="help-block">File size must be less than 2MB. <br>Allowed file types are pdf, doc, docx, ppt, pptx, rtf, txt</span>
        </div>
    </div>
    <br>
    <!-- Button -->
    <div class="form-group">
          <label class="col-md-4 control-label" for="btn"></label>
          <div class="col-md-4">
                <button id="btn2" name="btn2" class="btn btn-success">Update CV</button>
          </div>
    </div>
</form>
<script>

    $("#cv").change( function(submitEvent) {
       var fileSize = this.files[0];
       var sizeInMb = (fileSize.size/1024)/1024;
       var sizeLimit= 2;
       if (sizeInMb > sizeLimit) {
                alert('File size must be less than 2MB');
       }
       else 
       {
                submitEvent.preventDefault();
       }

       var filename = $("#cv").val();
       var extension = filename.replace(/^.*\./, '');
       if (extension == filename) {
           extension = '';
       } else {
           extension = extension.toLowerCase();
       }
       switch (extension) {
        case 'pdf':
        case 'doc':
        case 'docx':
        case 'ppt':
        case 'pptx':
        case 'rtf':
        case 'txt':
        $("#qual").submit(function(e){
            $("#qual").unbind('submit').submit()
        });
        break;

        default:
            alert('Inavlid file type')
            submitEvent.preventDefault();
       }
   });
</script>

上传简历
文件大小必须小于2MB
允许的文件类型有pdf、doc、docx、ppt、pptx、rtf、txt


更新简历
$（“#cv”）.更改（功能（提交事件）{
var fileSize=this.files[0]；
var sizeInMb=（fileSize.size/1024）/1024；
var-sizeLimit=2；
如果（sizeInMb>sizeLimit）{
警报（“文件大小必须小于2MB”）；
}
其他的
{
submitEvent.preventDefault（）；
}
var filename=$（“#cv”）.val（）；
变量扩展名=filename.replace（/^.*\./，''）；
if（扩展名==文件名）{
扩展=“”；
}否则{
extension=extension.toLowerCase（）；
}
交换机（分机）{
案例“pdf”：
案件‘文件’：
案件‘docx’：
案例“ppt”：
案例“pptx”：
案例“rtf”：
案例“txt”：
$（“#qual”）.提交（功能（e）{
$（“#qual”）.unbind（'submit'）.submit（）
});
打破
违约：
警报（'Inavlid文件类型'）
submitEvent.preventDefault（）；
}
});

您在更改文件时运行检查，但在提交表单时不运行检查。因此，即使文件不满足要求，用户仍然可以提交表单

如果在提交表单时执行相同的代码，那么它可以正常工作。为实现这一目标：

• 更改

  $（“#cv”）。更改（

  ）的

  $（“#qual”）。提交（

• 更新代码，以便正确读取文件大小

  document.getElementById（“cv”）.files[0]

  （这是由以前的更改引起的）

演示（也可在此网站上获得）：

$（“#qual”）.submit（函数（submitEvent）{
var fileSize=document.getElementById（“cv”）.files[0]；
var sizeInMb=（fileSize.size/1024）/1024；
var-sizeLimit=2；
如果（sizeInMb>sizeLimit）{
警报（“文件大小必须小于2MB”）；
//不需要其他部分。您想阻止此部分中的提交吗
submitEvent.preventDefault（）；
}
var filename=$（“#cv”）.val（）；
变量扩展名=filename.replace（/^.*\./，''）；
if（扩展名==文件名）{
扩展=“”；
}否则{
extension=extension.toLowerCase（）；
}
交换机（分机）{
案例“pdf”：
案件‘文件’：
案件‘docx’：
案例“ppt”：
案例“pptx”：
案例“rtf”：
案例“txt”：
//由于代码已更改为obsubmit，我认为您不需要此部分
打破
违约：
警报（'Inavlid文件类型'）
submitEvent.preventDefault（）；
}
});

上传简历
文件大小必须小于2MB
允许的文件类型有pdf、doc、docx、ppt、pptx、rtf、txt


更新简历
请不要使用标签，除非您的问题是关于此插件的。是。成功了。但是我必须点击“更新简历”按钮两次，这是什么意思？您必须单击两次才能提交表单？你能发送一份逐步列表，用上面的代码重现错误吗？是的。我通过单击“选择文件”选择了一个文件。之后，当我点击“更新简历”时，什么都没有发生。再次，如果我按下按钮，它将提交。我认为第一次点击它会检查文件扩展名和大小，并允许提交（但不允许提交）。在第二次单击它提交OK时，我想我发现了一个可能导致此问题的问题。我将用新代码更新此JSFIDLE的代码检查：。现在对我来说很好。