输入文件如果为空则运行不起作用

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>

Answer 1

没有文件时files[0]的索引不存在。您可以在 files[0] 中添加一个问号 (Optional_chaining)，这样它就不会在没有文件时崩溃。然后你可以把fileTypecheck.length== 0改成!fileTypecheck，因为没有文件的时候是undefined.

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>

Answer 2

当 <input type="file"/> 没有选择任何文件时，其 HTMLInputElement.files 属性为空，因此 files[0] 为 undefined。

顺便说一句，您 不应该 依赖浏览器始终准确地告诉您文件类型：浏览器通常从他们的 File.type 属性主机 OS 的文件扩展名到 MIME 类型的注册表不可靠且经常过时。

也就是说，将您的代码更改为：请注意，我已经添加了 防御性编程 步骤来实际验证事物而不是做出假设：

function myFunction() {

    const inp = document.getElementById("file");
    if( !inp || inp.type !== 'file' ) throw new Error( "'file' input element not found." );
    
    if( inp.files.length !== 1 ) {
        alert( "Please select a single file first." );
        return;
    }

    const file = inp.files[0];
    if( file.type === 'image/png' ) {
        // OK
    
    }
    else {
        alert( "Please select a PNG file." );
    }
}

输入文件如果为空则运行不起作用

Input file does not run function if empty

javascript

function

file

input

is-empty

输入文件如果为空则 运行 不起作用

Input file does not run function if empty

javascript

function

file

input

is-empty

输入文件如果为空则运行不起作用