为什么第二个条件即使没有被满足，也总是触发？

Question

我正在检查上传的文件是否为>5 mb。如果是，则抛出错误消息并清除上载的值。

我还想检查文件是否为.mov类型。如果是，则抛出错误消息并清除上传的值。

我不明白为什么我的第二个条件总是触发。我希望它是在哪里，如果一个.mov文件类型被上传，只有第二个if条件的错误消息被抛出，而不是第一个if条件的错误消息(完全忽略它)。

我试过使用else if和else {if(...)}，但这似乎也不起作用。

我做错了什么?

$(document).on('change', '.uploadedFile', function () {
var fileSize = this.files[0].size/1024/1024;
var fileType = /.(mov)$/i.test(this.files[0]);
if(fileSize > 5) {
alert("The video you've uploaded is " + Math.round(fileSize) + "MB.  Please upload a video that's 5MB or less!");
$('.uploadedFile').val('');
}
if(!fileType) {
alert("Only .mp4 file types are allowed");
$('.uploadedFile').val('');
}
});

Answer 1

考虑以下内容:

$(document).on('change', '.uploadedFile', function() {
var fileSize = this.files[0].size / 1024 / 1024;
var fileType = /.(mov|mpg|mp4)$/i.test(this.files[0]);
if (!fileType && fileSize > 5) {
alert("Please upload only .mov, .mpg, or .mp4 Files that are no more than 5 MB.");
return false;
}
});

这将两个检查合并到一个条件中。必须同时满足这两个条件才能继续。

Answer 2

必须使用return结束第一个if，以防止运行其他if条件。

$(document).on('change', '.uploadedFile', function () {
var fileSize = this.files[0].size/1024/1024;
var fileType = /.(mov)$/i.test(this.files[0]);

if(fileSize > 5) {
alert("The video you've uploaded is " + Math.round(fileSize) + "MB.  Please upload a video that's 5MB or less!");
$('.uploadedFile').val('');
return;
}

if(!fileType) {
alert("Only .mp4 file types are allowed");
$('.uploadedFile').val('');
}
});

或者你可以试试这个，将第二个if设置为第一个if的else状态:

$(document).on('change', '.uploadedFile', function () {
var fileSize = this.files[0].size/1024/1024;
var fileType = /.(mov)$/i.test(this.files[0]);
if(fileSize > 5) {
alert("The video you've uploaded is " + Math.round(fileSize) + "MB.  Please upload a video that's 5MB or less!");
$('.uploadedFile').val('');

} else{
if(!fileType) {
alert("Only .mp4 file types are allowed");
$('.uploadedFile').val('');
}
}

});