FileReader检查文件类型 - JavaScript

在JavaScript中，可以使用FileReader对象来读取文件并检查文件的类型。FileReader对象允许Web应用程序按照异步方式访问本地计算机的文件。

FileReader对象

FileReader对象是一个用于读取文件内容的API，可以让Web应用程序读取本地文件并将其转换为数据URL或者二进制字符串。它有下面几个方法:

• FileReader.readAsDataURL() - 将文件读取为Data URL
• FileReader.readAsBinaryString() - 将文件读取为二进制字符串
• FileReader.readAsArrayBuffer() - 将文件读取为ArrayBuffer

检查文件类型

使用FileReader对象读取文件后，可以通过检查文件的MIME类型来确定文件的类型。MIME类型是一种在互联网上为了大型数据通信而创建的标准方式。

在JavaScript中，可以通过File.type属性获取MIME类型。如果要检查文件是否为图片类型，则可以使用下面的代码：

function checkFileType(file) {
  if (file.type.match('image.*')) {
    console.log('File is an image');
  } else {
    console.log('File is not an image');
  }
}

该函数会读取文件并检查文件类型是否匹配image.*，如果是图片则打印'File is an image'，否则打印'File is not an image'。

示例代码

下面是一个完整的使用FileReader对象检查文件类型的示例代码：

<input type="file" id="fileInput">
<script>
var fileInput = document.getElementById('fileInput');

fileInput.addEventListener('change', function(e) {
  var file = fileInput.files[0];
  var reader = new FileReader();

  reader.onload = function(e) {
    checkFileType(file);
  };

  reader.readAsDataURL(file);
});

function checkFileType(file) {
  if (file.type.match('image.*')) {
    console.log('File is an image');
  } else {
    console.log('File is not an image');
  }
}
</script>

在这个例子中，当文件被选择后，change事件会触发FileReader来读取文件并调用checkFileType()函数来检查该文件的类型。