Javascript 在提交表单之前，如何检查是否已选择上载文件

我有一个表单，可以选择上传文件

我已经包括了一个脚本，以检查在提交表单之前文件大小是否过大，如果用户试图上载大于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>

document.forms[0]。addEventListener（'submit'，函数（evt）{
var file=document.getElementById（'file'）.files[0]；
如果（file&&file.size<2097152）{//2 MB（此大小以字节为单位）
//提交表格
}否则{
//防止默认和显示错误
警报（“文件大小超过2Mb！”）；
evt.preventDefault（）；
}
}，假）；

如果有人能帮我找到答案，我将不胜感激

托格

如果用户不希望包含上载文件，我如何允许提交表单

您需要将if逻辑更改为检查大小，并仅在文件存在时停止表单提交，而不是总是这样。现在，您的代码一直在检查文件，如果文件不存在，它将进入else块，从而停止提交事件

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

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

document.forms[0]。addEventListener（'submit'，函数（evt）{
var file=document.getElementById（'file'）.files[0]；
if（file）//仅当存在文件时才执行大小检查。
{
if（file.size<2097152）{//2 MB（此大小以字节为单位）
//提交表格
}否则{
//防止默认和显示错误
警报（“文件大小超过2Mb！”）；
evt.preventDefault（）；
}
}    
}，假）；

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

如果用户不希望包含上载文件，我如何允许提交表单

您需要将if逻辑更改为检查大小，并仅在文件存在时停止表单提交，而不是总是这样。现在，您的代码一直在检查文件，如果文件不存在，它将进入else块，从而停止提交事件

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

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

document.forms[0]。addEventListener（'submit'，函数（evt）{
var file=document.getElementById（'file'）.files[0]；
if（file）//仅当存在文件时才执行大小检查。
{
if（file.size<2097152）{//2 MB（此大小以字节为单位）
//提交表格
}否则{
//防止默认和显示错误
警报（“文件大小超过2Mb！”）；
evt.preventDefault（）；
}
}    
}，假）；

---

此逻辑在没有上载文件时提交表单，并且在上载文件时进行检查以确保文件小于2 MB。

如果未选择任何文件，则返回true

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

    if(!file)
        return true;

    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>

document.forms[0]。addEventListener（'submit'，函数（evt）{
var file=document.getElementById（'file'）.files[0]；
如果（！文件）
返回true；
if（（file&&file.size<2097152））{//2 MB（此大小以字节为单位）
//提交表格
} 
其他的
//防止默认和显示错误
警报（“文件大小超过2Mb！”）；
evt.preventDefault（）；
}
}，假）；

如果未选择任何文件，则返回true

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

    if(!file)
        return true;

    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>

document.forms[0]。addEventListener（'submit'，函数（evt）{
var file=document.getElementById（'file'）.files[0]；
如果（！文件）
返回true；
if（（file&&file.size<2097152））{//2 MB（此大小以字节为单位）
//提交表格
} 
其他的
//防止默认和显示错误
警报（“文件大小超过2Mb！”）；
evt.preventDefault（）；
}
}，假）；

使用return false；我把它放在哪里？@shafiquislam你错了显示你的html代码检查这个堆栈溢出问题使用return false；我把它放在哪里？@shafiquislam你错了显示你的html代码检查这个堆栈溢出问题