javascript - 输入文件为空时不运行函数

Question

如果我插入png它可以工作，如果我插入jpg它可以工作，但是如果我将文件留空它就不起作用，为什么？该文件应该是 png 或空的。

function myFunction() {
  var fileTypecheck = document.getElementById("file").files[0].type.replace(/(.*)\//g, '');
  
  if(fileTypecheck == "png" || fileTypecheck.length == 0){
  
      alert("File is png or 0");
  }else{
      alert("File is NOT png or 0");
  }
}

<input type="file" name="file" id="file"  onchange="loadFile(event)" accept="image/png">

<button onclick="myFunction()">Click me</button>

标签： javascriptfunctionfileinputis-empty

Answer 1

当没有文件时，索引files[0]不存在。您可以添加一个问号 ( Optional_chaining )，files[0]这样它就不会在没有文件时崩溃。然后您可以更改fileTypecheck.length== 0为，!fileTypecheck因为当没有文件时它将是未定义的。

function myFunction() {
  var fileTypecheck = document.getElementById("file").files[0]?.type.replace(/(.*)\//g, '');
  
  if(fileTypecheck == "png" || !fileTypecheck){
  
      alert("File is png or 0");
  }else{
      alert("File is NOT png or 0");
  }
}

<input type="file" name="file" id="file" accept="image/png">

<button onclick="myFunction()">Click me</button>