下面是详细的讲解：

JS中FileReader类实现文件上传及时预览功能

1. FileReader类介绍

FileReader是HTML5中提供的一个用来读取文件的类，可以通过它将本地的文件读取到内存中。可用于文件上传前的文件预览功能。

FileReader类有以下2个主要方法：

• readAsDataURL(file)：将读取到的文件转换成base64编码，可以直接展示在浏览器上；
• readAsText(file)：将读取到的文件转换成字符串。

2. 文件上传及时预览功能实现步骤

步骤如下：

2.1 HTML布局

在HTML中，先布局一个用于上传文件的按钮和一个用于预览文件的区域。示例代码如下：

<input type="file" id="file" onchange="preview()">
<div id="preview"></div>

其中，input标签的type属性设为file，id属性设为file，onchange属性指定了一个预览函数preview()。div标签的id属性设为preview，用于展示预览的效果。

2.2 JS编写

在JavaScript中，编写一个预览函数preview()，将上传的文件读取进来并显示到预览区域。具体代码如下：

function preview() {
  // 1. 获取上传的文件对象，这里是input的files属性
  var file = document.querySelector('#file').files[0];

  // 2. 新建一个FileReader对象
  var reader = new FileReader();

  // 3. 监听reader读取完成事件
  reader.onload = function (e) {
    // 4. 将读取的结果赋值给预览区域的innerHTML
    document.querySelector('#preview').innerHTML = '<img src="' + e.target.result + '">';
  }

  // 5. 读取文件内容，并转换为base64编码
  reader.readAsDataURL(file);
}

以上是一个基础的文件上传及时预览功能的实现。在用户选择好文件后，点击上传按钮即可立即展示预览效果。

2.3 示例1：文件类型检测

在有些场景下，需要限制上传文件的类型，比如只允许上传图片文件。可通过添加文件类型的判断来实现。

function preview() {
  var file = document.querySelector('#file').files[0];
  var allowedTypes = ['image/jpeg', 'image/png', 'image/gif'];

  if (!allowedTypes.includes(file.type)) {
    alert('只允许上传jpg/png/gif格式的图片');
    return
  }

  var reader = new FileReader();

  reader.onload = function (e) {
    document.querySelector('#preview').innerHTML = '<img src="' + e.target.result + '">';
  }

  reader.readAsDataURL(file);
}

其中，变量allowedTypes用于存放允许上传的文件类型，如果用户选择的文件类型不在allowedTypes列表中，则弹出提示并返回。

2.4 示例2：图片缩放功能

在上传图片时，为了展示效果美观，可以实现将图片进行缩放再进行预览。具体实现方式有多种，这里介绍一种用canvas实现的方法。

function preview() {
  var file = document.querySelector('#file').files[0];
  var allowedTypes = ['image/jpeg', 'image/png', 'image/gif'];

  if (!allowedTypes.includes(file.type)) {
    alert('只允许上传jpg/png/gif格式的图片');
    return
  }

  var reader = new FileReader();
  var img = document.createElement('img');
  var canvas = document.createElement('canvas');
  var ctx = canvas.getContext('2d');

  img.onload = function () {
    // 限制图片的宽度不超过500像素
    var width = img.width;
    if (width > 500) {
      var height = img.height * (500 / width);
      canvas.width = 500;
      canvas.height = height;
      ctx.drawImage(img, 0, 0, 500, height);
    } else {
      canvas.width = width;
      canvas.height = img.height;
      ctx.drawImage(img, 0, 0, width, img.height);
    }

    // 将缩放后的图片显示在预览区域
    var base64 = canvas.toDataURL('image/png');
    document.querySelector('#preview').innerHTML = '<img src="' + base64 + '">';

  }

  reader.readAsDataURL(file);
  img.src = URL.createObjectURL(file);
}

以上代码通过先读取图片，然后判断图片的宽度是否超过500像素，如果超过则进行按比例缩小的操作，最后将缩小后图像转化为base64后显示在页面上。