Javascript 结合文件大小检查和文件类型检查-JS验证

因此，我试图在上传文件之前验证文件上传，并希望检查两个条件-文件是否小于5mb以及文件是否为图像格式

我现在就是这样做的：

<script>
$(document).ready(function () {
  $('input[type=file]').change(function () {
    var fileSize = this.files[0].size/1024/1024;
    if (fileSize > 5) { alert("Please check the size of your image");
      $(this).val('');
    }
    var val = $(this).val().toLowerCase();
    var regex = new RegExp("(.*?)\.(png|jpg|jpeg|gif)$");
    if(!(regex.test(val))) {
      $(this).val('');
      alert('Only image files are supported. Please check the format of your file and try again.');
    } 
  }); 
});
</script>

$（文档）.ready（函数（）{
$（'input[type=file]'）。更改（函数（）{
var fileSize=this.files[0].size/1024/1024；
如果（fileSize>5）{alert（“请检查图像大小”）；
$（this.val（“”）；
}
var val=$（this.val（）.toLowerCase（）；
var regex=new RegExp（（*？）\（png | jpg | jpeg | gif）$）；
如果（！（正则表达式测试（val）））{
$（this.val（“”）；
警报（'仅支持图像文件。请检查文件格式并重试'）；
} 
}); 
});

它可以正常工作，只是如果文件太大并且被删除，错误文件类型的警报也会触发，因为输入已更改

---

有没有更好的办法来解决这个问题？我想检查这两个条件，如果只有图像大小错误，用户不会收到关于文件格式的警告。如果触发了第一个函数，是否可以终止第二个函数？

下面是您可以做的事情，创建和管理一系列错误，并在最后使用它。单击run查看演示

$（文档）.ready（函数（）{
$（'input[type=file]'）。更改（函数（）{
var file=this.files[0]，
val=$（this.val（）.trim（）.toLowerCase（）；
如果（！file | |$（this）.val（）==“”）{return；}
var fileSize=file.size/1024/1024，
regex=newregexp（“（*？”）\（png | jpg | jpeg | gif）$”，
误差=[]；
如果（文件大小>5）{
错误。推送（“请检查图像大小”）；
}
如果（！（正则表达式测试（val）））{
错误。push（'仅支持图像文件。请检查文件格式，然后重试'）；
}
如果（errors.length>0）{
$（this.val（“”）；
警报（errors.join（'\r\n'））；
}
});
});

构造
if/else if
来到mindOk太棒了！将标记为正确！如果需要，它可以触发一个或两个错误。