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上找到）：

＆＃13;

$("#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();
    }
});

＆＃13;

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

＆＃13;

阅读完评论后，我查看了代码，发现了两个可能的问题：

如果文件大小正确，则阻止提交事件，但在文件大小失败时则不会。删除了else部分，并将preventDefault()添加到if。
当代码被移动到表单提交而不是文件更改时，如果扩展名是正确的，您不需要弄乱表单提交。（虽然我并非100％肯定这会影响最终结果）。因此，如果文件扩展名正确，您可以删除代码。

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

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

1 个答案: