javascript - 在提交表单之前如何检查文件是否已选择上传

Question

我有一个表单，其中包含上传文件的选项。

我包含了一个脚本，用于在提交表单之前检查文件大小是否太大，并且如果用户尝试上传大于 2MB 的文件，则会显示警报，如果文件小于 2MB，则该脚本会起作用。文件已上传。然后，我使用 PHP 验证表单并将其处理为电子邮件

但是，如果用户根本不尝试上传文件，警报消息仍然会弹出，从而阻止表单提交。

如果用户不想包含上传文件，如何允许提交表单？ 我的代码是:

<script>
document.forms[0].addEventListener('submit', function( evt ) {
    var file = document.getElementById('file').files[0];

    if(file && file.size < 2097152) { // 2 MB (this size is in bytes)
          //Submit form        
    } else {
        //Prevent default and display error
        alert("File is  over 2Mb in size!");
        evt.preventDefault();
    }
}, false);
</script>

如果有人能帮助我找到答案，非常感谢。

托格

Answer 1

How can I allow the form to be submitted if the user does not want to include an upload file?

您需要更改 if 逻辑，以仅在文件存在时检查大小并停止表单提交，但并非总是如此。现在，您的代码始终检查文件，如果文件不存在，则会进入 else block ，从而停止您的提交事件。

我建议您重构您的逻辑，如下所示。

<script>
 document.forms[0].addEventListener('submit', function( evt ) {
 var file = document.getElementById('file').files[0];

 if(file)  // perform the size check only if a file is present.
 {
   if(file.size < 2097152) { // 2 MB (this size is in bytes)
      //Submit form        
   } else {
     //Prevent default and display error
     alert("File is  over 2Mb in size!");
     evt.preventDefault();
   }
 }    

 }, false);
</script>

此逻辑在没有上传文件时提交表单，当有上传文件时，它会进行检查以确保文件小于 2 MB。