教你如何使用 JavaScript 读取文件

首先我们来讲一下使用 JavaScript 读取文件的基本步骤。

1. 创建一个 input 元素

<input type="file" id="inputFile">

我们需要在 HTML 中创建一个 input 元素，并设置其 type 属性为 file，获取用户从本地计算机中选择的文件。

2. 监听 onchange 事件并获取文件

const inputFile = document.getElementById('inputFile');

inputFile.addEventListener('change', function() {
  const file = this.files[0];
  console.log(file);
});

我们需要在 JavaScript 文件中监听 input 元素的 onchange 事件，当 input 元素的值改变时，会触发 onchange 事件。我们可以通过 this.files[0] 来获取用户选择的第一个文件，然后可以将该文件赋值给一个变量进行操作。

3. 读取文件内容

const inputFile = document.getElementById('inputFile');

inputFile.addEventListener('change', function() {
  const file = this.files[0];
  const reader = new FileReader();

  reader.readAsText(file);

  reader.onload = function() {
    console.log(reader.result);
  };
});

我们需要创建一个 FileReader 对象，并使用其 readAsText 方法来读取文件内容，这里我们以读取文本文件为例。当读取完成后，会触发 onload 事件，我们可以在事件处理函数中通过 reader.result 来获取读取到的文件内容。

以下是两个示例：

示例一：显示文本文件内容

<input type="file" id="inputFile">
<pre id="fileContent"></pre>

const inputFile = document.getElementById('inputFile');
const fileContent = document.getElementById('fileContent');

inputFile.addEventListener('change', function() {
  const file = this.files[0];
  const reader = new FileReader();

  reader.readAsText(file);

  reader.onload = function() {
    fileContent.textContent = reader.result;
  };
});

在 HTML 中新增一个 pre 元素，用于显示文件内容。在 JavaScript 中获取该 pre 元素，并在 FileReader 的 onload 事件处理函数中将读取到的文件内容赋值给该元素的 textContent 属性。

示例二：通过 FileReader 和 Canvas 显示图片文件

<input type="file" id="inputFile">
<canvas id="canvas"></canvas>

const inputFile = document.getElementById('inputFile');
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

inputFile.addEventListener('change', function() {
  const file = this.files[0];
  const reader = new FileReader();

  reader.readAsDataURL(file);

  reader.onload = function() {
    const img = new Image();
    img.src = reader.result;

    img.onload = function() {
      canvas.width = img.width;
      canvas.height = img.height;
      ctx.drawImage(img, 0, 0);
    };
  };
});

在 HTML 中新增一个 canvas 元素，用于显示图片文件。在 JavaScript 中获取该 canvas 元素和上下文对象 ctx。读取图片文件时，我们需要使用 readAsDataURL 方法来读取图片数据，并将读取到的数据赋值给一个 Image 对象的 src 属性。当 Image 对象的 onload 事件触发后，我们可以获取到图片的宽度和高度，并使用 ctx.drawImage 方法在 canvas 上绘制该图片。