Javascript 文件验证总是返回 false

Question

我有一个函数是文件上传的一部分，但是当我尝试通过数组验证文件时，无论我使用“接受”文件还是“错误”文件，我都会得到相同的最终结果，即关于代码返回 false 语句的警报消息。

有人能发现这里有错误吗？函数中没有语法错误。

handleFiles = function (files,e){
var rand = Math.floor((Math.random()*100000)+3);

for(var i=0, file; file = files[i]; i++) {

var fileType = new Array("psd","ai","eps","svg","png","doc","docx","jpg","jpeg","pptx","ppt","gif");
var file_extension = file.name.split('.').pop().toLowerCase();

if (parseInt(file.size / 1024) > 204800) {  
    alert("Filen er \""+file.name+"\" for stor");
    return false;   
}
    if (fileType[i]==file_extension)
    {
        var src = '/printuploads/upload.png'

        var template = '<div class="eachImage" id="'+rand+'">';
        template += '<span class="preview" id="'+rand+'"><img src="'+src+'"><span class="overlay"><span class="updone"></span></span>';
        template += '</span>'
        template += '<div class="progress" id="'+rand+'"><span></span></div>';  

        if($("#dropbox .eachImage").html() == null)
        $("#dropbox").html(template);
        else
        $("#dropbox").append(template);

        upload(file,rand);
        return true;
    }
    alert("Forkert filformat");
    return false;
}
};

Answer 1

您检查文件扩展名是否受支持的验证不正确:

fileType[i]==file_extension

这里，i是文件的索引，而不是扩展名。因此每个文件扩展名都会与“psd”进行比较。

相反，它应该检查扩展名在数组 file_extension 中是否可用。您可以使用 Array#some 方法来做到这一点:

fileType.some(t => t == file_extension)

或者，您可以简单地使用 indexOf 检查扩展名是否属于数组:

fileType.indexOf(file_extension) >= 0

这是一个工作片段，您可以在控制台中检查记录的值:

var handleFiles = function(files, e) {
  var rand = Math.floor((Math.random() * 100000) + 3);

  for (var i = 0, file; file = files[i]; i++) {

    var fileType = new Array("psd", "ai", "eps", "svg", "png", "doc", "docx", "jpg", "jpeg", "pptx", "ppt", "gif");
    var file_extension = file.name.split('.').pop().toLowerCase();

    if (parseInt(file.size / 1024) > 204800) {
      alert("Filen er \"" + file.name + "\" for stor");
      return false;
    }
    
    if (fileType.some(t => t == file_extension)) {
      console.log("Extension matches");
      var src = '/printuploads/upload.png'

      var template = '<div class="eachImage" id="' + rand + '">';
      template += '<span class="preview" id="' + rand + '"><img src="' + src + '"><span class="overlay"><span class="updone"></span></span>';
      template += '</span>'
      template += '<div class="progress" id="' + rand + '"><span></span></div>';

      if ($("#dropbox .eachImage").html() == null)
        $("#dropbox").html(template);
      else
        $("#dropbox").append(template);

      upload(file, rand);
      return true;
    }
    alert("Forkert filformat");
    return false;
  }
};

function upload() {};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type ="file" onchange="handleFiles(this.files, event);">