js读取本地文件的实例

下面是详细的讲解和示例说明。

什么是读取本地文件的实例？

在网页中，我们有时需要读取本地的文件，比如图片、音频、视频等等。而JavaScript是不允许直接访问本地文件系统的，因为这会给用户的计算机带来安全隐患。但是，如果我们得到了用户选择的文件，那么我们就可以通过操作这个文件对象来读取它的内容。

如何读取本地文件？

前提条件：用户选择了文件

我们可以通过以下步骤来读取本地文件：

1. 获取文件对象

当用户选择了文件后，我们可以通过输入框或拖拽等方式获取到文件对象。

<input type="file" id="fileInput" />

我们可以通过js来获取到这个文件对象：

const fileInput = document.getElementById('fileInput');
const file = fileInput.files[0];

1. 通过FileReader对象读取文件内容

获取到文件对象后，我们可以通过FileReader对象来读取文件的内容。FileReader对象的readAsText()、readAsDataURL()、readAsArrayBuffer()、readAsBinaryString()方法可以分别读取文件的文本、数据URL、ArrayBuffer和二进制字符串。不过在读取大文件时，推荐使用readAsArrayBuffer()方法。

const reader = new FileReader();
reader.onload = function(event) {
  console.log(event.target.result);
}
reader.readAsText(file);

上面的代码将会读取到文件的内容并在控制台输出。

示例一：读取本地图片并显示到网页

我们可以通过上面的方法读取本地图片，并将其显示到网页上。

首先，我们需要一个input标签来选择文件。

<input type="file" id="fileInput" />

然后，我们可以通过下面的代码来读取文件，并将其显示到网页上。

const fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', function() {
  const file = fileInput.files[0];
  const reader = new FileReader();
  reader.onload = function(event) {
    const img = new Image();
    img.src = event.target.result;
    document.body.appendChild(img);
  }
  reader.readAsDataURL(file);
});

上面的代码会在选择文件后，读取文件并将其显示到网页上。

示例二：读取本地CSV文件并解析为数组

我们可以将读取的CSV文件解析为数组，方便后续的使用。

首先，我们需要一个input标签来选择文件。

<input type="file" id="fileInput" />

然后，我们可以通过下面的代码来读取文件，并将其解析为数组。

const fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', function() {
  const file = fileInput.files[0];
  const reader = new FileReader();
  reader.onload = function(event) {
    const lines = event.target.result.split('\n');
    const data = [];
    for(let i=0;i<lines.length;i++){
      const parts = lines[i].split(',');
      data.push(parts);
    }
    console.log(data);
  }
  reader.readAsText(file);
});

上面的代码会在选择文件后，读取CSV文件并将其解析为二维数组。输出结果可以在控制台查看。

小结

通过上面的讲解和示例，我们了解了如何使用JavaScript读取本地文件。读取本地文件可以方便地获取用户上传的资源，并进行进一步的处理。但是要注意，读取文件是需要用户授权的，同时也需要考虑到文件大小、文件类型等问题。