Javascript 文件类型检查器

Javascript File Type Checker

我一直在使用一个文件扩展名检查器,但我只是想不通为什么它不起作用。我让它测试显示一个布尔值 equal 来判断这两个值是否相等。相反,它继续说我上传的文件不等于 if 语句中列出的文件类型,即使这两个值完全相同。任何帮助将不胜感激

document.addEventListener('DOMContentLoaded', function() {
    document.querySelector('input[id="fileInput"]').onchange=validateSize;
})

function validateSize(event) {
    var filesLength = event.target.files.length;
    var filesSize = [];
    var result = "";
    var equal = null;
    document.getElementById("fileBigAlert").innerHTML = "";
    document.getElementById("fileExtAlert").innerHTML = "";

    if (filesLength >= 10) {
        document.getElementById("submitButton").disabled = true;
    } else {
        document.getElementById("submitButton").disabled = false;
    }

    for (i = 0; i < filesLength; i++) {

        if (event.target.files[i].size > 2097152) {
            document.getElementById("submitButton").disabled = true;
            document.getElementById("fileBigAlert").innerHTML = '<div class="alert alert-warning" role="alert">'
            + event.target.files[i].name + ' is larger than 2MB</div>';
        } else {
            filesSize.push(event.target.files[i].size);
        }

        if (String(event.target.files[i].type) !== "image/png" || "image/jpeg" || "image/gif") {
            equal = false;
            //document.getElementById("submitButton").disabled = true;
            //document.getElementById("fileExtAlert").innerHTML = '<div class="alert alert-warning" role="alert">'
            //    + event.target.files[i].name + ' Extension not allowed please choose a JPEG, JPG, GIF, or PNG file.</div>';
        } else {
            equal = true;
            //filesSize.push(event.target.files[i].size);
        }

    }

    console.log(event.target.files[0].type);
    console.log(equal);


    filesSize.forEach(function(item, index, array){ 
       result +=  index + ": " + item + "<br/>";
    });

    document.getElementById("fileValidate").innerHTML = result;
}

索引如下

<body>
<div class="container">
    <div id="fileValidate"></div>
    <div id="fileBigAlert"></div>
    <div id="fileExtAlert"></div>
    <form action="upload.php" method="post" enctype="multipart/form-data">
        <input type="file" name="userfile[]" id="fileInput" multiple>

        <input type="submit" id="submitButton">
    </form>
</div>


<script src="checkfile.js"></script>

您比较多个值的方式不正确。你有 (string) !== (string) or (string) or (string) 这总是等于 (string) !== (string) 的布尔值,如果它是 true 或以下 (string) 在 or 之后(||)。但是,后面的字符串值 "image/jpeg" 将始终等于真布尔值。本质上,您只匹配第一个条目 ("image/png")。如果文件不是 png 类型,则 if 语句将始终 return 为真,而 equal 将始终为假。

您想比较的方式:

var ftMustMatch = ["image/png", "image/jpeg", "image/gif"];

if( ftMustMatch.indexOf(String(event.target.files[i].type).toLowerCase()) < 0 ) {
    equal = false;
}

这可以读作"if the lowercased string value type of the file does not match any of the values of the array (the result will be less than zero), then set equal to false."

ftMustMatch 是文件类型必须匹配的缩写。

为什么 toLowerCase?以防万一该值以不同的大小写形式引入,它仍将匹配您定义的值数组中的小写值。