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

Question

我正在使用以下代码提交表单以上传简历。我想检查所选文件的扩展名和大小。并且仅在满足某些条件时才提交表格。现在，表单显示警报消息。但是用户仍然可以提交表单。下面是代码

<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>

Answer 1

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

如果您在提交表单时执行相同的代码，它会正常工作。要实现这一点:

• 将 $("#cv").change() 更改为 $("#qual").submit()
• 更新代码，以便您可以正确读取文件大小 document.getElementById("cv").files[0](这是由之前的更改引起的)。

演示(也可在此 JSFiddle 上获得):

$("#qual").submit( function(submitEvent) {
    var fileSize = document.getElementById("cv").files[0];
    var sizeInMb = (fileSize.size/1024)/1024;
    var sizeLimit= 2;
    if (sizeInMb > sizeLimit) {
        alert('File size must be less than 2MB');
        // no need for the else part. You want to prevent the submission in this part
        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':
            // As the code was changed to the obsubmit, I think you don't need this part
            break;
            
        default:
            alert('Inavlid file type')
            submitEvent.preventDefault();
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<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>

看完评论，我查看了代码，发现了两个可能的问题:

1. 如果文件大小正确则提交事件被阻止，但如果文件大小不正确则不会。删除了 else 部分并将 preventDefault() 添加到 if。
2. 由于代码已移至表单提交而不是文件更改，因此如果扩展名正确，您无需弄乱表单提交。 (虽然我不是 100% 肯定这会影响最终结果)。因此，如果文件扩展名正确，您可以删除代码。

我相应地更新了代码，您也可以在 JSFiddle 上看到更改.